jquery 引导3数据切换图标更改

gijlo24d  于 2022-12-03  发布在  jQuery
关注(0)|答案(3)|浏览(174)

我有这个代码到目前为止:
http://jsfiddle.net/4z6j454q/

$(document).ready(function(){   
    $('li').each(function() { 
      $(this).on('shown', function () {
         $(this).children().attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
      });

      $(this).on('hidden', function () {
         $(this).children().attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");;
      });
    });
  });

我尝试显示向下或向右箭头,这取决于
1.是否折叠,现在忽略html中的src。
我不知道为什么我的jQuery不工作。我搜索所有
1.标签,然后决定是否显示或隐藏它们,然后编辑子标签的src
谢谢你的建议

6g8kf2rb

6g8kf2rb1#

演示:MY FIDDLE

单击时未获得结果的原因是以下问题:

  • 没有绑定到LI的单击事件。当前您只是在加载页面时加载图像。
  • 您没有指定隐藏或显示哪个元素。通过添加.next(),您将告诉DOM查看LI列表中的下一个元素,并查看它是否隐藏。

我会试试这个:

$(document).ready(function(){  
    function checkOnLoad(elem){
        if(elem.next().css("display") === "none"){
            elem.find('img').attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
        } else {
            elem.find('img').attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");
        }
    }

    function checkOnClick(li_clicked){
        var id = li_clicked.attr("data-target");
         $(id).on('hidden.bs.collapse', function () {           
             li_clicked.children('img').attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
        })

         $(id).on('shown.bs.collapse', function () {
           li_clicked.children('img').attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");
        })
    }

    $('li').each(function() { 
        checkOnLoad($(this));
    });

    $('li').click(function() { 
        checkOnClick($(this));
    });
});
p1tboqfb

p1tboqfb2#

您需要侦听bootstrap的shown.bs.collapsehidden.bs.collapse事件,而不仅仅是“显示”和“隐藏”。
这样试试看:

$(document).ready(function(){   
    $('li').each(function() {
        var li = $(this);
        li.on('shown.bs.collapse', function () {
           li.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
        });

        li.on('hidden.bs.collapse', function () {
           li.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");;
        });
    });
});
irtuqstp

irtuqstp3#

这是有效的,虽然不知道为什么。

$(document).ready(function(){  
    function checkCollapsed(elem){
      if(elem.next().css("display") === "none"){
           elem.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");;
      } else {
           elem.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");
      }
    }

    function checkCollapsed2(elem){
      if(elem.next().css("display") === "none"){
           elem.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");;
      } else {
           elem.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
      }
    }

    $('li').each(function() { 
          checkCollapsed($(this));
    });

    $('li').click(function() { 
           checkCollapsed2($(this));
    });
});

相关问题