禁用圖像引導

我有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

禁用圖像引導

回答

相關問題