禁用图像引导

我有4个图像，它允许用户仅选择1图像总分4.禁用图像引导

当用户点击任何图像上，与其它3个图像一起被点击的图像应被停用，该相同的用户必须再次点击“点击”图像才能启用图像。

基本上我需要使图像看起来像它的Clickable（带有一些边框或其他东西），然后onclick图像说'A'用户得到一条消息（如when_i_click_carrom（）所示），后所有图像（B，C，D）都应该禁用（仅限该用户），同一用户必须点击禁用的图像'A'才能启用它。

注：仅图像A应该为当前用户和其他用户被禁止，但其他图像B，C，d应该是可点击的其他用户，直到当前用户使图像A

... 
<script> 
    var when_i_click_carrom = function(){ 
     alert('You selected Carrom!'); 
    } 
</script> 
... 
<div class="container"> 


    <div class="grid_layout_row"> 
     <div class="col-md-6"> 
      <div class="sidebar"><img src="images/carrom.jpg" alt="carrom" class="img-responsive" onclick="when_i_click_carrom();"/></div> 
     </div> 
     <div class="col-md-6"> 
      <div class="sidebar"><img src="images/foosball.jpg" alt="foosball" class="img-responsive"></div> 
     </div> 
     <div class="col-md-6"> 
      <div class="sidebar"><img src="images/table-tennis.jpg" alt="table-tennis" class="img-responsive"></div> 
     </div> 
     <div class="col-md-6"> 
      <div class="sidebar"><img src="images/chess.jpg" alt="chess" class="img-responsive"></div> 
     </div> 
    </div> 
</div>

来源

2017-06-16 phyme

你可以分享你已经写好获取代码预期的功能？ – viCky

你的意思是“禁用其他用户”和“可点击其他用户”？ – Gerard

您的意思是说，该网站应该实时更新，并禁止所有其他网站访问者有人点击图片？ – IiroP

与querySelectorAll尝试.IMG没有默认禁用属性。所以尽量带班

document.querySelectorAll('.img-responsive').forEach(function(a) { 
 
    a.addEventListener('click', function() { 
 
    this.disabled = this.disabled == true ? false : true; 
 
    this.classList.toggle('disable') 
 
    //console.log(this.disabled) 
 
    }) 
 
})

.disable { 
 
    opacity: 0.5; 
 
}

<div class="container"> 
 
    <div class="grid_layout_row"> 
 
    <div class="col-md-6"> 
 
     <div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="carrom" class="img-responsive"></div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="foosball" class="img-responsive"></div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="table-tennis" class="img-responsive"></div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="chess" class="img-responsive"></div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-16 06:14:50 prasanth

该代码似乎有一些错误 – phyme

你能告诉最新的错误吗？ – prasanth

你可以在这里看看。

jQuery(".sidebar").click(function(){ 
if(jQuery(".sidebar").hasClass("disabled")){ 
    jQuery(".sidebar").removeClass("disabled"); 
}else{ 
    jQuery(".sidebar").addClass("disabled"); 
} 
});

https://jsfiddle.net/ott5wanq/4/

来源

2017-06-16 06:38:19

由于您使用的引导，你可以使用图像按钮，并使用禁用类的所有项目时，其中一个点击。我创建了一个例子：

HTML：

<div class="container"> 
    <div class="grid_layout_row"> 
    <div class="col-md-6"> 
    <div class="sidebar"><button type="button" id="btn1" class="btn btn-primary myBtn" onclick="imgClicked()"> 
     <img src="http://lorempixel.com/400/200/sports/1" alt="carrom" class="img-responsive"> 
     </button></div> 
    </div> 

    <div class="col-md-6"> 
     <div class="sidebar"><button type="button" id="btn2" class="btn btn-primary myBtn" onclick="imgClicked()" > 
     <img src="http://lorempixel.com/400/200/sports/2" alt="carrom" class="img-responsive"> 
     </button></div> 
    </div> 

    <div class="col-md-6"> 
     <div class="sidebar"><button type="button" id="btn3" class="btn btn-primary myBtn" onclick="imgClicked()"> 
     <img src="http://lorempixel.com/400/200/sports/3" alt="carrom" class="img-responsive"> 
     </button></div> 
    </div> 

    <div class="col-md-6"> 
     <div class="sidebar"><button type="button" id="btn4" class="btn btn-primary myBtn" onclick="imgClicked()"> 
     <img src="http://lorempixel.com/400/200/sports/5" alt="carrom" class="img-responsive"> 
     </button></div> 
    </div> 

</div>

脚本（使用jQuery）：

function imgClicked(){ 
    $('.myBtn').addClass('disabled'); 
}

https://jsfiddle.net/emilvr/80u0pbyw/2/

来源

2017-06-16 06:38:24

禁用图像引导

回答

相关问题