php - jQueryのクラスとsubstr？

Question

<div class="test-test-one">one</div>
<input type="checkbox" class="now" name="here_one"> <br />

<div class="test-test-two">two</div>
<input type="checkbox" class="now" name="here_two"> <br />

<div class="test-test-three">three</div>
<input type="checkbox" class="now" name="here_three"> <br />

<div class="test-test-four">four</div>
<input type="checkbox" class="now" name="here_four"> <br />

フィドル：http ：//jsfiddle.net/3eUEp/

私はしたい：

名前= here_oneのチェックボックスをクリックすると、クラス.redがクラスtest-test-oneのdivに追加され、クラスtest-test-oneのチェックボックスをクリックすると、名前= here_one のチェックボックスもオンになります。

どうすればjQueryでそれを作ることができますか？前と次を使いたくない。セレクターを使用したいのですが、これにPHPのsubstrを使用するにはどうすればよいですか？

score 1 · Accepted Answer

$('.now').click(function(){
    var elem = $(this);  //the checkbox
    var numStr = elem.prop("name").split("_")[1];  //split the name into pieces
    $(".test-test-" + numStr).toggleClass("red", elem.is(":checked")); //get the element, toggle the class
});

編集されたjsfiddle

今、あなたはdivを使用していないはずです、あなたはラベルを使用しているべきです。ラベルをクリックすると、やりたいことができます。JavaScriptは必要ありません。

<label class="test-test-one" for="foo1">one</div>
<input type="checkbox" class="now" name="here_one" id="foo1"> <br />

また、ラベルを使用すると、スクリーンリーダーを使用しているサービスを利用していることになります。

score 1 · Accepted Answer

これがjavascriptのドキュメントです：http ：//www.w3schools.com/jsref/

そしてjQuery：http ://docs.jquery.com/Main_Page

$('.now').click(function(){
    var v = $(this).attr('name').replace('here_', '');
if($(this).is(':checked'))  
{
        $('.test-test-'+v).addClass('red');
    }
    else
    {
        $('.test-test-'+v).removeClass('red');
    }
});


$("div[class^='test-test']").click(function(){
    if($(this).hasClass('red'))
    {
        $(this).next('.now').attr('checked', false);
        $(this).removeClass('red');
    }
    else
    {
        $(this).next('.now').attr('checked', true);
        $(this).addClass('red');
    }
});

score 0 · Accepted Answer

そのためにPHPは必要ありません。JS自体にsubstrメソッドがあります。

$(function() {
    $("input.now").change(function(e) {
        var div = $("div.test-test-"+this.name.substr(5));
        if (this.checked)
           div.addClass("red");
        else
           div.removeClass("red");
    });
});

（jsfiddle.netでのデモ）

score 0 · Accepted Answer

$("div[class^=test-test-]").click(
    function ()
    {
        var sub = ($(this).attr("class")).substring(10);
        $(".now[name=here_"+sub+"]").attr("checked",true);
    }
    );

$(".now").click(
     function ()
    {
        var sub = ($(this).attr("name")).substring(5);
        alert(sub);
        $(".test-test-"+sub).addClass("red");
    }
    );

score 0 · Accepted Answer

$('.now').click(function(){
  var name_part = $(this).prop('name').split('_')[1];

  if($(this).is(':checked')){

    $('div[class$='+name_part+']').css('color', '#F00');

  }else{

    $('div[class$='+name_part+']').css('color', '#000');  

  }
});

php - jQueryのクラスとsubstr？

5 に答える 5

Related

Reference