0

我正在尝试在我的页面中实现书签功能。想象一个项目列表，每个项目都有一个标志。您可以单击该标志以突出显示您的选择，然后再次单击它以取消选择。

在这里，flags 是div保存书签/标志图标的类。我正在使用 data-flag 属性来跟踪书签/标志的当前状态。每当我单击该标志时，我都可以将data-flag属性更改为1，但是再次单击它时，它不会将data-flag属性重置为0，而是保持原样1并在现有图像之外附加另一个图像。

$(".flags").each(function(){
    var $this = $(this);
    $this.click(function() {
        var flagtest = $this.data("flag");
            if(flagtest == 0){
                $this.attr("data-flag","1");
                $this.append("<img class='image' src='icon_dark.png'height=8px/>");
            } else if(flagtest == 1){
                $this.attr("data-flag","0");
                $this.append("<img class='image' src='icon_light.png'height=8px/>");
            }
        });
});

任何人都可以在这里看到问题吗？

4

3 回答 3

4

在数据属性中使用 true/false 会更容易，而且您只是在图像后附加图像，您还必须删除它们：

$(".flags").each(function(idx,elm){
    $(elm).data('flag', false).on('click', function() {
        var flag = $(this).data("flag");
        if (flag) {
            $(this).html("<img class='image' src='icon_dark.png'height=8px/>");
        } else {
            $(this).html("<img class='image' src='icon_light.png'height=8px/>");
        }
        $(this).data("flag", !flag); //toggle state
    });
});​

更简洁的方法是检查图像是否存在，如果存在则更改源：

$(".flags").each(function(idx,elm){
    $(elm).data('flag', false).on('click', function() {
        var flag = $(this).data("flag"),
            hasImg = $(this).find('.image').length,
            imgSrc = flag ? 'icon_dark.png' : 'icon_light.png';

        if (hasImg) {
            $('.image', this).attr('src', imgSrc);
        }else{
            var element = $('<img />', {src: imgSrc, 'class':'image', height:'8px'});
            $(this).append(element);
        }

        $(this).data("flag", !flag); //toggle state
    });
});​
于 2012-10-29T16:30:07.600 回答
1

是的。$this您在单击处理程序中再次引用。您还附加到 div 而不是更改它。

这就是你想要的：

$(".flags").each(function(){
    var $this = $(this);
    $this.click(function() {
        $this = $(this); // added
        var flagtest = $this.data("flag"); 
            if(flagtest == 0){
                $this.attr("data-flag","1");
                $this.html("<img class='image' src='icon_dark.png'height=8px/>");
            } else if(flagtest == 1){
                $this.attr("data-flag","0");
                $this.html("<img class='image' src='icon_light.png'height=8px/>");
            }
        });
});
于 2012-10-29T16:31:00.657 回答
0

您的代码将始终附加一个图像标签。您应该改用一个类来切换图像的样式或直接更改标签的src属性。img

例如，假设您正在单击图像本身：

<img class='flag' src='icon_dark.png' />

$(".flag").click(function() {
  var img = $(this);

  var flagtest = img.data("flag");
  if (flagtest==0) {
    img.attr('src', 'icon_dark.png');
  } else {        
    img.attr('src', 'icon_light.png');
  }

  img.data("flag", !flagtest);
});
于 2012-10-29T16:32:36.197 回答