Question

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

这里，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/>"); } }); });并在现有图片之外添加其他图片。

{{1}}

有人能在这看到问题吗？

Answer 1

在数据属性中使用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
    });
});

Answer 2

是的。您在单击处理程序中再次引用$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/>");
            }
        });
});

Answer 3

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

e.g。假设您单击图像本身：

<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);
});

使用jQuery实现书签/标志

3 个答案: