Javascript 使用jQuery实现书签/标志

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

这里，flags是保存书签/标志图标的

div

类。我使用数据标志属性来跟踪书签/标志的当前状态。我可以在每次单击标志时将

数据标志

属性更改为

1

，但再次单击后，它不会将

数据标志

属性重置为

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

$（“.flags”）。每个（函数（）{
var$this=$（this）；
$this。单击（函数（）{
var flagtest=$this.data（“flag”）；
如果（flagtest==0）{
$this.attr（“数据标志”，“1”）；
$this.追加（“”）；
}else if（flagtest==1）{
$this.attr（“数据标志”，“0”）；
$this.追加（“”）；
}
});
});

---

有人能看到这里的问题吗？

在数据属性中使用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”）。每个（函数（idx、elm）{
$（elm）.data（'flag'，false）.on（'click'，function（））{
var flag=$（this）.data（“flag”）；
国际单项体育联合会（旗）{
$（this.html（“”）；
}否则{
$（this.html（“”）；
}
$（this）.data（“flag”，！flag）；//切换状态
});
});​

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

$(".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
    });
});​

$（“.flags”）。每个（函数（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'；
如果（hasImg）{
$（'.image'，this.attr（'src'，imgSrc）；
}否则{
var element=$（'在数据属性中只使用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”）。每个（函数（idx、elm）{
$（elm）.data（'flag'，false）.on（'click'，function（））{
var flag=$（this）.data（“flag”）；
国际单项体育联合会（旗）{
$（this.html（“”）；
}否则{
$（this.html（“”）；
}
$（this）.data（“flag”，！flag）；//切换状态
});
});​

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

$(".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
    });
});​

$（“.flags”）。每个（函数（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'；
如果（hasImg）{
$（'.image'，this.attr（'src'，imgSrc）；
}否则{
var element=$（'是的。您在单击处理程序中再次引用了
$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/>");
            }
        });
});

$（“.flags”）。每个（函数（）{
var$this=$（this）；
$this。单击（函数（）{
$this=$（this）；//已添加
var flagtest=$this.data（“flag”）；
如果（flagtest==0）{
$this.attr（“数据标志”，“1”）；
$this.html（“”）；
}else if（flagtest==1）{
$this.attr（“数据标志”，“0”）；
$this.html（“”）；
}
});
});
是的。您在单击处理程序中再次引用了
$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/>");
            }
        });
});

$（“.flags”）。每个（函数（）{
var$this=$（this）；
$this。单击（函数（）{
$this=$（this）；//已添加
var flagtest=$this.data（“flag”）；
如果（flagtest==0）{
$this.attr（“数据标志”，“1”）；
$this.html（“”）；
}else if（flagtest==1）{
$this.attr（“数据标志”，“0”）；
$this.html（“”）；
}
});
});
您的代码将始终附加图像标记。您应该使用类来切换图像的样式，或者直接更改
img
标记的
src
属性

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


$（“.flag”）。单击（函数（）{
var img=$（本）；
var flagtest=模拟数据（“标志”）；
如果（flagtest==0）{
img.attr（'src'，'icon_dark.png'）；
}否则{
img.attr（'src'，'icon_light.png'）；
}
图像数据（“标志”，！标志测试）；
});
您的代码将始终附加图像标记。您应该使用类来切换图像的样式，或者直接更改
img
标记的
src
属性

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


$（“.flag”）。单击（函数（）{
var img=$（本）；
var flagtest=模拟数据（“标志”）；
如果（flagtest==0）{
img.attr（'src'，'icon_dark.png'）；
}否则{
img.attr（'src'，'icon_light.png'）；
}
图像数据（“标志”，！标志测试）；
});
我使用的是整数值，因为您可以按标签排序，整数值只会将所有选定项目组合在一起。谢谢！我使用的是整数值，因为您可以按标签排序，整数值只会将所有选定项目组合在一起。谢谢！