DOM要素のプロパティがセレクタによって異なる - jQuery

Question

ulのチェックボックスがあり、ユーザーがli要素のどこかをクリックして対応するチェックボックスをオン/オフにしてから、javascriptを使用してページに変更を適用できるようにしたい。すべてのチェックボックスがチェックアウトされていることに注意してください。これはいくつかの要素を除いたレイアウトですli要素。

<ul class="dropdown-menu"> 
    <li class="cat-header"> 
     <strong>Category</strong> 
    </li> 
    <li> 
     <a class="filter-link"> Red 
      <input checked="true" class="cat-check" data-filter="red" data-type="color" type="Checkbox"> 
     </a> 
    </li> 

私は、チェックボックスのcheckedプロパティに基づいて、ページを変更するためにJavaScriptを使用してみてください。しかし、要素をどのように選択するかによって異なる値が得られます。私の機能はこのようになります

setFilter = function(checkbox) { 
    console.log(checkbox); 
    if ($(checkbox).attr('data-type') === "color") { 
    if (!$(checkbox).prop('checked')) { 
     $(checkbox).prop('checked', false); 
     colorFilter = colorFilter.replace($(checkbox).attr('data-filter') + " ", ""); 
    } else { 
     $(checkbox).prop('checked', true); 
     colorFilter = colorFilter + $(checkbox).attr('data-filter') + " "; 
    } 
    } else if ($(checkbox).attr('data-type') === "shape") { 
    if (!$(checkbox).prop('checked')) { 
     $(checkbox).prop('checked', false); 
     shapeFilter = shapeFilter + $(checkbox).attr('data-filter') + " "; 
    } else { 
     $(checkbox).prop('checked', true); 
     shapeFilter = shapeFilter.replace($(checkbox).attr('data-filter') + " ", ""); 
    } 
    } 
}; 

カップルノート。第1に、形状は排他的である（すなわち、その形状を有するならばそれを示さない）ので、わずかに異なる論理であるが、色は包括的である（すなわち、その色を有するならばそれを示す）。第二に、.prop()機能は、私はそれゆえ、私はこのようにそれを呼び出すif (!$(checkbox).prop('checked'))

を期待していたものの反対の値を返していました、それは本当

$('.filter-link').click(function(e) { 
    setFilter($(this).children("input")[0]); 
    }); 

を出力しますが、私はこのようにそれを呼び出すときに、それが出力します偽

$('.cat-check').click(function(e) { 
    setFilter($(this)[0]); 
    }); 

私はJSFiddle（https://jsfiddle.net/eg9c4vkv/6/）で効果を再現してみましたが、効果を複製することができませんでした。私はまた、console.log（How can I change the default behavior of console.log? (*Error console in safari, no add-on*)）に関連するかもしれないと思ったが、理論的には、入力が同じである限り、関数は同じように動作するはずである。誰にもアイデアはありますか？

Answer 1

私はいくつかの小さな問題を見ていますが、何も明らかではありません。

まず、data属性にアクセスします。もう一つは、ハンドラーをバインドする方法です（チェックボックスをクリックするたびに、予期しない動作が発生する可能性のある.cat-checkと.filter-linkの両方のイベントは発生しません）。いずれの場合でも、助けになる。

属性に接頭辞data-を含めると、jQueryに準備ができたら自動的に値をキャッシュするように指示します。

<a href="" data-filter="hello">Hello</a>

Refer to jQuery data docs for more info

は、あなただけのこのケースで filterまたは typeだろうキーを使用する必要があり、データにアクセスするには

$('a').data('filter', 'hello'); 

に相当します。 はのように属性に直接アクセスできますが、どちらか一方（好ましくは.data）を使用してください。

マークアップ付き..

<a href="" data-filter="hello">Hello</a> 

$('a').on('click', function(e) { 
    var $this = $(this); 
    $this.data('filter', 'I changed'); 
    //what will the value be? It's going to be 'Hello', because we're accessing the attribute in the DOM 
    alert($this.attr('data-filter')); 

    //what will the value be? It's going to be 'I changed', because we're accessing the data cache 
    alert($this.data('filter')); 
}); 

これを試してみてください、私はそれが判明

var colorFilter = 'red green yellow '; 
 

 
$('.dropdown-menu') 
 
    .on('click', 'li', function(e) { 
 
    \t //check the source of the event, if the checkbox was already clicked then let it continue 
 
    if (e.target.type != "checkbox") { 
 
     $(this).find(".cat-check").click(); 
 
    } 
 
    }) 
 
    .on('click', '.cat-check', function() { 
 
    console.log(this); 
 
    var $checkbox = $(this), 
 
     type = $checkbox.data('type'), 
 
     filter = $checkbox.data('filter'), 
 
     isChecked = $checkbox.prop('checked'); 
 
    console.log(isChecked); 
 
    if (type === "color") { 
 
     if (isChecked) { 
 
     if (colorFilter.indexOf(filter) < 0) { 
 
      colorFilter = colorFilter + filter + " "; 
 
     } 
 
     } else { 
 
     colorFilter = colorFilter.replace(filter + " ", ""); 
 
     } 
 
     $('#filter').text(colorFilter); 
 
    } else if (type === "shape") { 
 
     if (isChecked) { 
 
     if (colorFilter.indexOf(filter) < 0) { 
 
      shapeFilter = shapeFilter + filter + " "; 
 
     } 
 
     } else { 
 
     shapeFilter = shapeFilter.replace(filter + " ", ""); 
 
     } 
 
     console.log(shapeFilter); 
 
    } 
 
    });

li { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id='filter'> 
 
    red green yellow 
 
</div> 
 
<ul class="dropdown-menu"> 
 
    <li class="cat-header"> 
 
    <strong>Category</strong> 
 
    </li> 
 
    <li> 
 
    <a class="filter-link"> Red 
 
      <input checked="true" class="cat-check" data-filter="red" data-type="color" type="Checkbox"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
    <a class="filter-link"> Green 
 
      <input checked="true" class="cat-check" data-filter="green" data-type="color" type="Checkbox"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
    <a class="filter-link"> Yellow 
 
      <input checked="true" class="cat-check" data-filter="yellow" data-type="color" type="Checkbox"> 
 
     </a> 
 
    </li> 
 
</ul>

Answer 2

（以下スニペットは、あなたのために働く必要があります）、私はそれはあなたがやろうとしている何であるかを理解すると思いますaではなくチェックボックスがクリックされた場合、メソッドが呼び出される前にcheckedプロパティが切り替わり、実行時に異なる値が与えられることになります。簡単な回避策は、aがクリックされたときに、チェックボックスでクリックイベントを発生させることです。

$('.filter-link').click(function(e) { 
    $(this).children("input").click(); 
}); 

@Kevinのおかげで、私はもともと開発していたよりも、より洗練された解決策を得ました。