Question

我正在尝试在单击一个类时切换图像。到目前为止，我有这个（下面），它可以改变我的＆＃39; plus.png＆＃39;到我的＆＃39; minus.png＆＃39;但我需要它改回我的＆＃39; plus.png＆＃39;如果再次点击该课程。

我有以下jQuery：

<script type="text/javascript">
$(document).ready(function () {
$('label.tree-toggler, .yellow').click(function () {
    $(this).parent().children('.yellow').attr('src', 'img/minus.png');
});
});

</script>

HTML

<li><label class="tree-toggler nav-header">Saftey and Emissions</label><img class="yellow" src="img/plus.png"><hr></hr>
   <ul class="nav nav-list tree">
      <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
      <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
   </ul>
</li>

有人可以通过添加我的内容来帮助我，我们将非常感激！

Answer 1

您可以添加/删除类以跟踪您正在使用的src图像。像这样：

$('label.tree-toggler, .yellow').click(function () {
    if ( $(this).parent().children('.yellow').hasClass('minus') ) {
        $(this).parent().children('.yellow').attr('src', 'img/plus.png').removeClass('minus');
    } else {
        $(this).parent().children('.yellow').attr('src', 'img/minus.png').addClass('minus');
    }     
});

您还可以使用数据属性并执行类似的操作：

$('label.tree-toggler, .yellow').click(function () {
    if ( $(this).parent().children('.yellow').data('current_src') == 'minus') {
        $(this).parent().children('.yellow').attr('src', 'img/plus.png').data('current_src', 'plus');
    } else {
        $(this).parent().children('.yellow').attr('src', 'img/minus.png').data('current_src', 'minus');
    }     
});

使用data属性需要在元素上初始设置data-current_src='minus'。

Answer 2

我将这样做的方式是......

$(document).ready(
    function() {
        $(".className").click(
             var imgPath = $("img").attr('src');
             if(imgPath === "+.png") {  // check against current path
                // change the path to - 
             } else {
                // change the path to +
             }

）; }）;

我没有测试过，但这就是想法

Answer 3

我建议您在切换图像时通过JQuery添加另一个类.active或.shown。这样您就可以检查您要查询的对象的当前状态。

Jquery可能看起来像

$('label.tree-toggler, .yellow').click(function () {
   // If the active class is NOT applied
   if( !( $(this).parent().children('.yellow').hasClass('active') ) ) {
      // Apply it and change the image
      $(this).parent().children('.yellow').addClass('active').attr('src','img/minus.png');
   }
   else 
      $(this).parent().children('.yellow').removeClass('active').attr('src', 'img/plus.png');


});

这里发生的是active类用于确定所显示图像的状态。单击它时，您将更改图像并应用标记。

每次点击后，都会检查标志并执行相应的操作。希望有所帮助！我还是S.O.的新手。 = =＆＃34;

Answer 4

如果你想在JS中这样做，我建议你把：

您在src
data-alternative

像这样：

<li>
    <label class="tree-toggler nav-header">Saftey and Emissions</label>
    <img class="yellow" src="img/plus.png" data-alternative="img/minus.png"><hr></hr>
    <ul class="nav nav-list tree">
        <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
        <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
    </ul>
</li>

和JS：

<script type="text/javascript">
$(document).ready(function () {
    $('label.tree-toggler, .yellow').click(function () {
        var yellow = $(this).parent().children('.yellow').first();
        var alternative = yellow.data('alternative');
        yellow.data('alternative', yellow.attr('src'))
              .attr('src', alternative );
    });
});

</script>

Answer 5

您是否看到了Jquery的切换功能？

http://api.jquery.com/toggle/

尝试再次点击和返回更改图像

5 个答案: