jQuery编号的ID

时间：2018-12-17 07:00:55

标签： jquery

我试图通过几个按钮在红色和绿色之间切换，我已经浏览了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>

4 个答案:

答案 0 :(得分：2)

您可以在点击功能内使用$(this).find('.here')来定位该div中特定的button：

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

答案 1 :(得分：0)

您可以使用toggleClass功能切换绿色背景的班级。

此外，您应该在定义的类中使用样式，并且可以通过在.here类中添加边距来避免多余的div包装器。

在此示例中，所有按钮背景将被更改：

$(".but").click(function() {
  $(".here").toggleClass("clicked-here");
});
.but {
  background: none;
  border: none;
}

.here {
  width: 30px;
  height: 30px;
  background-color: red;
  margin: 6px;
}

.clicked-here {
  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'>
  <div class='here' id='sq_0' alt=''></div>
</button>
<button class='but' type='submit' name='submit'>
  <div class='here' id='sq_1' alt=''></div>
</button>
<button class='but' type='submit' name='submit'>
  <div class='here' id='sq_2' alt=''></div>
</button>
<button class='but' type='submit' name='submit'>
  <div class='here' id='sq_3' alt=''></div>
</button>
<button class='but' type='submit' name='submit'>
  <div class='here' id='sq_4' alt=''></div>
</button>

这将仅更改单击的按钮：

$(".but").click(function() {
  $(this).find(".here").toggleClass("clicked-here");
});
.but {
  background: none;
  border: none;
}

.here {
  width: 30px;
  height: 30px;
  background-color: red;
  margin: 6px;
}

.clicked-here {
  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'>
  <div class='here' id='sq_0' alt=''></div>
</button>
<button class='but' type='submit' name='submit'>
  <div class='here' id='sq_1' alt=''></div>
</button>
<button class='but' type='submit' name='submit'>
  <div class='here' id='sq_2' alt=''></div>
</button>
<button class='but' type='submit' name='submit'>
  <div class='here' id='sq_3' alt=''></div>
</button>
<button class='but' type='submit' name='submit'>
  <div class='here' id='sq_4' alt=''></div>
</button>

答案 2 :(得分：0)

您应该使用jQuery类选择器来选择具有给定类的所有元素 jQuery Class Selector (“.class”)

这里是例子

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class demo</title>
  <style>
  div, span {
    width: 120px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
 
<script>
$( ".myClass" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>

答案 3 :(得分：0)

如果您不想应用!important，请从样式中删除颜色并使用纯类，请从$(this).find('.here')获取并切换类。

$(document).ready(function() {
  $(".but").click(function() {
    $(this).find('.here').toggleClass('green');
  });
});
.here {
  background-color: red;
}

.here.green {
  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; ' 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; ' 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; ' 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; ' 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; ' alt=''></div>
</div>
</button>

相关问题
最新问题