0

我有一组以span元素为标题的复选框。span选中复选框后，我希望 url 中的文本换行。但是，我确实有用于选择span类名的代码。为了让我的代码正常工作，我的复选框 id 与我的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>

查询：

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. 选择器的缓存，例如$spanand $input。
  3. 使用.prop()代替.attr()。
  4. 用于.prev()获取input元素，因为它们都恰好在您的span元素之前。
  5. id从一个属性到class另一个属性的更改ID意味着在所有 DOM 中都是唯一的。

$('#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

您实际上并不是在构建一个数组，而是一个字符串 ( "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 回答
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 回答