jQuery中的类和substr？

<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 />

FIDDLE：http://jsfiddle.net/3eUEp/jQuery中的类和substr？

我想这样做：

，如果我与名复选框，单击= here_one那么这应该是添加类.red带班测试的div -test-one 如果我点击div test-test-one那么也应该勾选复选框，并在名称= 这里_one。

我怎样才能使它与jQuery？我不想使用prev和next。我想使用选择器，但如何使用PHP的substr为此？

来源

2012-08-17 Martin Henderksen

为什么不使用'prev'和'next'？ – Bergi 2012-08-17 14:59:43

这里是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'); 
    } 
});

来源

2012-08-17 14:55:53

Btw：http://w3fools.com/。而且您应该深入链接到OP所需的文档，而不是一般资源。 – Bergi 2012-08-17 15:02:48

谢谢，但如果我点击div然后这不检查复选框 – 2012-08-17 15:06:43

$('.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 
});

Edited jsfiddle

现在你shoudl不使用div的，你应该使用标签。点击标签会做你想要的。没有JavaScript需要。

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

而当您使用标签时，您正在为人们提供使用屏幕阅读器的服务。

来源

2012-08-17 14:55:08 epascarello

谢谢，但是如果我点击div然后这个不检查复选框 – 2012-08-17 15:07:03

正如我所说的，你应该使用一个标签，而不是一个div。我没有编码div版本，因为它基本上与复选框相同。将选择器更改为'div [class^= test-test-]'并添加一行以选中该复选框。 – epascarello 2012-08-17 16:44:34

你不需要任何PHP为，JS本身具有substr method。

$(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"); 
    }); 
});

（Demo at jsfiddle.net）

来源

2012-08-17 14:56:22 Bergi

谢谢，但如果我点击div然后这不检查checkebox – 2012-08-17 15:05:06

$("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"); 
    } 
    );

来源

2012-08-17 14:57:02 Cranio

$('.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'); 

    } 
});

来源

2012-08-17 15:00:28 Ohgodwhy

谢谢，但如果我点击div然后这不检查复选框 – 2012-08-17 15:05:51

jQuery中的类和substr？

回答

相关问题