Question

我有一组带有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>

JQUERY：

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');

}

});

});

example

Answer 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', '#');

我对您的代码进行了一些修改。

使用change事件处理程序。
选择器的缓存，例如$span和$input。
使用.prop()代替.attr()。
使用.prev()获取input元素，因为所有元素恰好位于span元素之前。
从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');
        }
    });
});

See it here.

Answer 2

只需删除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()
         }
    });

Answer 3

你并没有真正构建一个数组而是一个字符串（"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');
});

Answer 4

这是一个替代答案，因为它并没有真正解决数组问题，但为什么需要使用数组呢？这是否适用于您的代码，它会使用system []的名称获取所有输入元素并分配click事件：

$('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'这样的共享类，并使用它。看起来你正在为一些可以简化的事情做一些非常困难的事情......或者我没有掌握你的应用程序的全部意图。

使用类名为每个语句创建一个数组

4 个答案: