0

私の問題は次のとおりです。

この IMG / CSS / jQuery コードを使用して、Web サイトのチェックボックスのスタイルを設定しました

興味深い部分は次のとおりです。

<script type="text/javascript">
    $(document).ready(function() {
      // Iterate over checkboxes
      $("input[type=checkbox].switch").each(function() {
        // Insert mark-up for switch
        $(this).before(
          '<span class="switch">' +
          '<span class="mask" /><span class="background" />' +
          '</span>'
        );
        // Hide checkbox
        $(this).hide();
        // Set inital state
        if (!$(this)[0].checked) {
          $(this).prev().find(".background").css({left: "-56px"});
        }
      }); // End each()

      // Toggle switch when clicked
      $("span.switch").click(function() {
        // If on, slide switch off
        if ($(this).next()[0].checked) {
          $(this).find(".background").animate({left: "-56px"}, 200);

        // Otherwise, slide switch on
        } else {
          $(this).find(".background").animate({left: "0px"}, 200);
        }
        // Toggle state of checkbox
        $(this).next()[0].checked = !$(this).next()[0].checked;
      });
    }); // End ready()

</script>

今私はアクセスしたい：

<input type="checkbox" id="light2" class="switch">

JavaScript で ID タグをアドレス指定するにはどうすればよいですか?

私はこのようなことを試しました：

<script>
    $(document).ready(function(){
        $("span.switch + #light2").click(function(){
            if($(this).next()[0].checked)
            {
                alert('checked');
            }
            else
            {
                 alert('unchecked');
            }
        });
    });
</script>

ヒントをありがとう

4

3 に答える 3

1 
   $(document).ready(function(){
        $("#light2").click(function(){
            if($("#light2").is(":checked"))
            {
                alert('checked');
            }
            else
            {
                 alert('unchecked');
            }
        });
    });

作業例: http://jsfiddle.net/bA2fX/

于 2013-02-03T23:22:23.327 に答える
0

すべての ed要素のスタイルを設定することが目的の場合は、.switchCSSを介してスタイルを設定する必要があります。

.switchニーズがより複雑な場合は、を使用してすべてのクラス要素を選択することでそれを行うことができます$('.switch')。例えば：

$('.switch').css('color', 'red');

代わりに、IDを持つ特定の要素を選択するには（一意である必要があるため）、単にを使用できます$('#light2')。例えば：

$('#light1').on( 'click', function( evt ) {
    evt.preventDefault();
    if ($(this).is(':checked')) {
        /* your AJAX code */
    }
});

$('#light2').on( 'click', function( evt ) {
    evt.preventDefault();
    if ($(this).is(':checked')) {
        /* your AJAX code */
    }
});

ただし、コードの一部は実行時にjQueryによって作成されるため、疑似イベントの最後にイベントのスタイルを設定して添付する必要があります（この最後の場合は、委任onDomReadyすることもできます）。そうしないと、コードが見つかりません。要求された要素。

于 2013-02-03T23:46:34.447 に答える
0

ClarkeyBoy のおかげで、解決策は次のとおりです。

<script>
    $(document).ready(function(){
        $("#light2").prev("span.switch").click(function() {
            if($("#light2").attr("checked"))
            {
                alert('checked');
            }
            else
            {
                 alert('unchecked');
            }
        });
    });

</script>
于 2013-02-04T10:56:56.433 に答える