如何通过jQuery通过单击div更改背景颜色和具有多种颜色和多种图像的背景图像

Question

$(function(){
    $("#block").click(function(){

        if(!$(this).hasClass("greenDiv")) {
            $(this).addClass("greenDiv");
      $("#block12").hide('fast');
        } /* else {
          $("#block12").hide('fast');
        } */
    });


  $(function(){
    $("#block").hover(function(){

        if(!$(this).hasClass("greenDiv1")) {
            $(this).addClass("greenDiv1");
        } else {
          $(this).removeClass("greenDiv1");
        }
    });

});

$("#block12").click(function(){

        if(!$(this).hasClass("greenDiv12")) {
            $(this).addClass("greenDiv12");
       $("#block").hide('fast');
        } /* else {
          $("#block").hide('fast');
        } */
    });


  $(function(){
    $("#block12").hover(function(){

        if(!$(this).hasClass("greenDiv123")) {
            $(this).addClass("greenDiv123");
        } else {
          $(this).removeClass("greenDiv123");
        }
    });
  });
});

Answer 1

如果您尝试向具有某些公共属性的多个元素添加类似事件，，则可以使用下面的代码行。这会检查所有以id以^=字符串block开头的 $("*[id^=block]").click(function() { ... }); 元素。

$(this).toggleClass("...") // toggle a class
$(this).attr("name", "newvalue") // Change name of element to 'newvalue', can be used on any attribute

然后您可以使用以下任意一种方式更改被单击的单个元素的参数：

.each()

如果您想以不同的方式更改具有相似特征的多个元素，则可以将多重选择器与id函数一起使用。下面的代码从每个带有{以block开头并附加“。”的{1}}。对于div，您可以在该代码块中执行任何操作。

$("*[id^=block]").each(function() {
  $(this).append(".");
});

如果您要使用一个公共选择器对所有元素执行相同的操作，则可以将操作合并为一行，例如下面的行可切换类“ blue-text”以id开头的所有元素。

$("*[id^=block]").toggleClass("blue-text");

---

演示

// add click event to any item with an ID that starts with block
$("*[id^=block]").click(function() {

  // Toggle a class on clicked element (better than your if statements checking if it hasClass
  $(this).toggleClass("greenDiv");

  // Do something to all divs with matching id
  // Just adding a dot to the text
  $("*[id^=block]").each(function() {
    $(this).append(".");
  });


});

// Add click event to blue button
$("#blue").click( function() {

  // Toggle blue-text class for all elements that match selector
  $("*[id^=block]").toggleClass("blue-text");
  
});

.greenDiv {
  color: green !important;
}

.blue-text {
  color: blue;
}

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

<div id="block11">11</div>
<div id="block12">12</div>
<div id="block13">13</div>
<div id="block14">14</div>


<button id="blue">Blue Text</button>