0

ページにブックマーク機能を実装しようとしています。それぞれにフラグが付いたアイテムのリストを想像してみてください。フラグをクリックして選択を強調表示し、もう一度クリックして選択を解除できます。

divここで、flagsは、ブックマーク/フラグのアイコンを保持するクラスです。data-flag属性を使用して、ブックマーク/フラグの現在の状態を追跡しています。フラグをクリックするたびにdata-flag属性を変更できますが、もう一度クリックすると、属性をにリセットする代わりに、既存の画像に加えて別の画像がそのまま追加されます。1data-flag01

$(".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 に答える