Question

我有4张图片，用户只能选择4张图片中的1张。

当用户点击任何图片时，应该停用所点击的图片以及其他3张图片，同一位用户必须再次点击“点击”图片。图像以启用图像。

基本上我需要让图像看起来像它的Clickable（有一些边框或什么......），然后点击图像说＆＃39; A＆＃39;用户获得一条消息（如when_i_click_carrom（）所示），所有图像（B，C，D）应该被禁用（仅限该用户），同一用户必须点击禁用的图像＆＃39;甲＆＃39;启用它。

注意：对于当前用户和其他用户，只应禁用图像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>

Answer 1

尝试使用querySelectorAll。我没有默认的禁用属性。请尝试使用类

＆＃13;

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)
  })
})

＆＃13;

.disable {
  opacity: 0.5;
}

＆＃13;

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

＆＃13;

Answer 2

你可以在这里查看。

city = NEW.city

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

Answer 3

由于您使用的是bootstrap，因此当您点击其中一个项目时，您可以使用图像按钮并对所有项目使用禁用类。我创建了一个例子：

HTML：

<img *ngIf="!isImgLoaded" src="assets/images/profileimage.png" >
<img [hidden]="!isImgLoaded" [src]="user.image" (load)="isImgLoaded = true" >

脚本（使用Jquery）：

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

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

在单击html引导程序上禁用图像

3 个答案: