Question

所以我想出了如何在点击后进行元素更改 - 但是，当我再次点击它时，我无法弄清楚如何将其更改回原始元素。

我试图让灰色加号在点击时变为绿色，如果再次点击则变回灰色。

the pluses which I am trying to make alternate colors

将其更改为一种颜色：

$(document).ready(function(){
    $(document).on('click', '#add_image', function(){

        $(this).empty();
        $(this).append("<img src='images/green_plus.png' id='green'/>")
    });
})

我尝试将其替代：

$(document).ready(function(){
    $(document).on('click', '#add_image', function(){

        $(this).empty();
        $(this).append("<img src='images/green_plus.png' id='green'/>")
        $(this).click(function(){
                $(this).empty();
                $(this).append("<img src='images/gray_plus.png' id='green'/>")
        });
    });
})

此外，这是生成列表的php：

foreach($schools as $school){
        echo "<tr>";
            echo "<td>";
                echo "<a href='#' id='add_image'><img src = 'images/gray_plus.png'/></a>";
            echo "</td>";       
            echo "<td>";
                echo ("<a href='school/?school_name=" . $school['school_name'] . "'>");
                echo $school['school_name'];
                echo "</a>";
            echo "</td>";
       echo "</tr>";
        }

Answer 1

toggleClass()绝对是你需要的。

创建一个类，一个使用img green_plus，另一个使用grey_plus.and点击更改该类。

<强> CSS

.greyplus{
  background-image: 'path/to/gryimg'
}
.greenplus{
  background-image: 'path/to/grnimg'
}

<强> HTML

...
echo "<a href='#' id='add_image' class='greyplus'></a>";
...

<强> jquery的

$('#add_image').click(function(){
  $(this).toggleClass('greyplus').toggleClass('greenplus'); 
});

除非您动态添加，否则我认为您不需要使用on。

Answer 2

看到你必须使用类而不是id，因为id对于每个元素应该是唯一的，但是我们可以将同一个类名用于dom节点的多个实例。

$(document).ready(function(){
  var i = 0;
  $(document).on('click', '.add_image', function (e) { // change id to class
    e.preventDefault();  //<----stop the default behavior
    var img = "";
    $(this).empty();
    if(i==0) { 
       img = "green_plus.png"
       i++; //<----------------update to put it here.
    }else{
       img = "gray_plus.png";
       i = 0;
    }
    $(this).append("<img src='images/"+img+"' class='green'/>"); // change id to class
  });
});

所以你必须使用类名而不是ID，

Answer 3

我建议使用不同的类。使加号作为背景图像。然后做jQuery逻辑：

$(document).on('click', '.myButton', function(){
    $(this)
        .toggleClass('redPlus') // class for clicked element
        .toggleClass('greenPlus'); // class for default element
});

Answer 4

为背景图片添加css

.original{
background-image: (image here)
}
.changed{
background-image: (another image)
}

在jquery上只需执行：

$(document).ready(function(){
    $(document).on('click', '#add_image', function(){
      if($(this).hasClass('original'){
         $(this).removeClass('original'); 
         $(this).addClass('changed');
      }
      else{
         $(this).addClass('original');
      } 
    });
})

Answer 5

我会为每个所需的彩色图像设置合适的CSS类。默认选择器为灰色的.green，然后执行以下操作：

    $('body').on("click", "#add_image", function() {
        $(this).toggleClass("green");
    });

然后在伪选择器之前使用CSS将图像放在CSS类本身中的可点击元素旁边。。绿色

如何使用jQuery制作元素替换颜色？

5 个答案: