0

spanタイトルとして要素を持つ一連のチェックボックスがあります。spanチェックボックスがオンになったら、テキストをURLで折り返す必要があります。ただし、spanクラス名を選択するためのコードはありません。コードを機能させるために、チェックボックス ID を my と同じ名前にしていspanます。これは、array自分自身を設定すると機能しますが、何らかの理由で、スクリプトで作成したときに配列を機能させることができません。これがコードです

HTML:

<div id="product_list" style="float:left; clear:right;">
<input type="checkbox" id="p01" name="system[]" value="p01" form="compare">
<span style="margin-left:20px;" class="p01">product one</span>
<br/>

<input type="checkbox" id="p02" name="system[]" value="p02" form="compare">
<span style="margin-left:20px;" class="p02">product two</span>
<br/>

<input type="checkbox" id="p04" name="system[]" value="p04" form="compare">
<span style="margin-left:20px;" class="p04">product three</span>
<br/>

<input type="checkbox" id="p05" name="system[]" value="p05" form="compare">
<span style="margin-left:20px;" class="p02">product four</span>
<br/>

</div>

Jクエリ:

var arr = [];
arr = $('#product_list span').not('.hidden').map(function(i,e) {
return $(e).attr('class');
}).get().join(', ');

alert(arr);

    //arr = ["p01", "p02", "p03", "p04"]; works but not the above.

jQuery.each(arr , function(index, value){

$("#"+ value).click(function(){
// alert("clicked");
if ($(this).attr("checked") == "checked"){
$('.'+value).wrap('<a href="#" id="comparelink" target="_blank"></a>'); $('a').link('href', '#');    
}

else {
$('.'+value).unwrap('a');

}

});

});

例

4

4 に答える 4

1

現在、コードはarr次のように文字列に設定されています

"p01, p02, p04, p05"

単純に、を削除して、String#join必要な配列を生成します。

var arr = $('#product_list span').not('.hidden').map(function(i, e) {
    return $(e).attr('class');
}).get();

さらに、jQuery にはメソッドがありません.link()。を使用するつもりだったと思います.attr()。

使用する

$('a').attr('href', '#');

それ以外の

$('a').link('href', '#');

あなたのコードにいくつかの変更を加えました。

  1. changeイベント ハンドラの使用。
  2. $spanやなどのセレクターのキャッシュ$input。
  3. .prop()の代わりに を使用し.attr()ます。
  4. すべての要素がたまたま要素の直前にあるため、 を使用.prev()して要素を取得します。inputspan
  5. すべてのDOMで一意であることを意図しているため、属性からid属性に変更します。classID

$('#product_list span').not('.hidden').each(function() {
    var $span = $(this), $input = $span.prev();
    $input.change(function() {
        if ($input.prop("checked")) {
            $span.wrap($('<a/>', {
                "href": "#",
                "class": "comparelink",
                "target": "_blank"
            }));
        } else {
            $span.unwrap('a');
        }
    });
});​

こちらをご覧ください。

于 2013-01-02T21:27:15.113 に答える
1

を取り除くだけjoin()です。

arr = $('#product_list span').not('.hidden').map(function(i,e) {
return $(e).attr('class');
}).get();

get()jQuery オブジェクトから配列をアンラップします

単純なトラバースを使用するのではなく、配列を使用せずにこれを行うことができます。

var $checkboxes = $('#product_list span').not('.hidden').prev();
    $checkboxes.click(function(){
         if( this.checked){
              /* "A" tag has problems...can't duplicate ID's using class and no idea what href you want*/              
              $(this).next('span').wrap('<a href="#" class="comparelink" target="_blank"></a>'); 
         }else{
              $(this).next().find('span').unwrap()
         }
    });
于 2013-01-02T21:28:18.140 に答える
0

これは実際にはアレイの問題に対処していないため、より代替的な答えですが、なぜアレイを使用する必要があるのですか？これはあなたのコードで機能しますか？system []という名前のすべての入力要素を取得し、クリックイベントを割り当てます。

$('input[name="system[]"]').on('click', function() {
    var spanClass = $(this).attr('id');
    if ($(this).attr("checked") == "checked") {
        $('.' + spanClass).wrap('<a href="#" id="comparelink" target="_blank"></a>');
    }
    else {
        $('.' + spanClass).unwrap('a');
    }
});

これらの入力に「chkLink」のような共有クラスを与えて、その場で使用することもできます。単純化できる何かのために本当に難しいことをしているように思えます...それか私はあなたのアプリケーションの完全な意図を理解していません。

于 2013-01-02T21:35:40.673 に答える
0

実際には配列ではなく、文字列 ( "p01, p02, p03, p04") を作成しています。

交換

var arr = [];
arr = $('#product_list span').not('.hidden').map(function(i,e) {
return $(e).attr('class');
}).get().join(', ');

と

var arr = $('#product_list span').not('.hidden').map(function(i,e) {
    return $(e).attr('class');
});
于 2013-01-02T21:21:52.027 に答える