5

このprepend関数はdiv「colorBox」クラスで を追加しますが、新しく作成した の css を設定するのに問題がありますdiv。私の構文が正しいかどうかはわかりませんがdata-background、親( li)タグの値を使用しようとしています。

これを使用して にカラー ボックスを追加しています。使用しているプラ​​グインは、それぞれを、以下に示した HTML のような構造の にmultiselect options変換します。option<li>

JS

$(function(){
    $("li span").prepend('<div class="colorBox"></div>').css('background-color', $(this).parent().attr("data-background"));   
});

HTML

<ul>
    <li data-background="#C11B17">
        <input type="checkbox" name="color[]" value="Brick_Red">
        <span>Brick Red</span>
    </li>
</ul>
4

3 に答える 3

6

コードを少し分割してみてください。.css()が実際に親で呼び出され、コンテキストthisで参照されているため、失敗windowしています。

jsフィドル

$(function(){
    // Get all elements matching selector 'li span'
    var spans = $("li span");
    // Loop for each element in spans
    spans.each(function () {
        // Create the new element as a jQuery object
        var elem = $('<div class="colorBox">test</div>');
        // Set the new element's background-color to the attribute on the parent
        // of the span
        elem.css('background-color', $(this).parent().attr("data-background"));
        // Prepend the new element to the span (insert it as the first child)
        $(this).prepend(elem);
    });
});

"Brick Red" を でラップする場合は、またはdivを使用する必要があります。.wrap().wrapInner()

jsフィドル

$(this).wrap(elem);

アップデート

カスタムチェックボックスを使用している場合は、<label>タグを利用するより CSS 主導のアプローチをお勧めします。

jsフィドル

HTML

<ul>
    <li data-background="#C11B17">
        <input type="checkbox" name="color[]" value="Brick_Red" id="checkbox1" />
        <label for="checkbox1">
            <span>Brick Red</span>
        </label>
    </li>
</ul>

CSS

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label:before {
    display:inline-block;
    content:"";
    width:1em;
    height:1em;
    background-color:#CCC;
}

input[type=checkbox]:checked + label:before {
    background-color:#C11B17;
}

このメソッドは、ポリフィルなしで IE8+ で機能することに注意してください。

于 2013-04-16T03:14:53.207 に答える
4

css の代わりに .css() を使用する場合は、スタイルを使用して設定してみませんか?

var color = $('li').attr('data-background');
$("span").prepend('<div class="colorBox" style="background:' + color + '"></div>');
于 2013-04-16T03:22:15.027 に答える
0

jQuery では、この単語はチェーンの最後のオブジェクトに関するものです。あなたの例では、$("li span") は最後のオブジェクトなので、「this」という単語を使用すると、約 $("li span") になります。これを回避するには、代わりに prependTo を使用するだけです。これでうまくいくはずです：

jQuery(function(){
  jQuery('<div class="colorBox"></div>').prependTo(jQuery('#aaaa')).css(
  'background-color',jQuery(this).parent().attr("data-background"));   
});
于 2014-12-11T18:04:24.980 に答える