JQuery 编号 id

Question

我正在尝试使用几个按钮在红色和绿色之间切换，我已经浏览了 Jquery 文档，但我似乎无法弄清楚这个。

您可以在我的代码片段中看到，当我单击按钮时，所有按钮都会变成不同的颜色。

而且必须有一种更短的方法来做到这一点，而不是我把它批量化的方式。

任何帮助都会很棒!

$(document).ready(function(){
  $(".but").click( function(){
  $("#sq_0").css("background-color", "red");
  }, function(){
  $("#sq_0").css("background-color", "green");
  });
});
$(document).ready(function(){
  $(".but").click( function(){
  $("#sq_1").css("background-color", "red");
  }, function(){
  $("#sq_1").css("background-color", "green");
  });
});
$(document).ready(function(){
  $(".but").click( function(){
  $("#sq_2").css("background-color", "red");
  }, function(){
  $("#sq_2").css("background-color", "green");
  });
});
$(document).ready(function(){
  $(".but").click( function(){
  $("#sq_3").css("background-color", "red");
  }, function(){
  $("#sq_3").css("background-color", "green");
  });
});
$(document).ready(function(){
  $(".but").click( function(){
  $("#sq_4").css("background-color", "red");
  }, function(){
  $("#sq_4").css("background-color", "green");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_0' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>
<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_1' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>
<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_2' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>
<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_3' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>
<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_4' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>

Answer 1

您可以在点击函数中使用$(this).find('.here')来定位该按钮的特定div >:

$(document).ready(function() {
  $(".but").click(function() {
    $(this).find('.here').toggleClass('green');
  });
});

.green {
  background-color: green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_0' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>
<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_1' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>
<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_2' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>
<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_3' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>
<button class='but' type='submit' name='submit' style='background:none; border:none;'>
<div style='margin: 6px;'>
  <div class='here' id='sq_4' style='width:30px; height:30px; background-color:red;' alt=''></div>
</div>
</button>