Question

我正在尝试使用事件定位来创建一个无序列表，其中的列表项包含不同点击复选框的值。

$(this).click(function(e) {
    var myElem = document.getElementById(e.target.name);
    var price = parseInt(e.target.value);

    if (myElem == null){
        $('.container').append('<ul id="'+e.target.name+'">'+e.target.name+'</ul>');
    }
    if ($(this).name = myElem){
        if ($(this).is(':checked')){     
            sum += price;
            $('#'+e.target.name+'').append('<li>Cost: $'+sum+'</li>');
        } else {
            sum -= price;
            $('#'+e.target.name+' li').last().remove();
        }
    }

除第一个列表项外，它有效。我认为这是因为第一个列表项无处可去，因为无序列表是同时进行的。有没有办法一次创建或延迟列表项创建，直到无序列表生成？

这是一个工作小提琴：http://jsfiddle.net/dfzrt3qt/2/

Answer 1

目前的实施存在许多问题。

点击事件由复选框触发。您正在尝试将id = e.target.name的元素作为目标，即“productname”。没有这样的元素存在。

var myElem = document.getElementById(e.target.name);

第一次点击未显示金额的原因是因为您定位的'ul'标签没有值属性。

 $('.container').append('<ul id="'+e.target.name+'">'+e.target.name+'<ul>');
 var price = parseInt(e.target.value);
  $('#'+e.target.name+'').append('<li>Cost: $'+sum+'</li>');

这里如何修复它:(更新）

$('.days').find(':checkbox').each(function() {
        $(this).click(function(e) {    
            var sum = 0;
            var price = parseInt(e.target.value);
            if ($('ul[id="' + e.target.name + '"]')[0] == undefined){
                $('.container').append('<ul id="' + e.target.name + '">'+e.target.name+'</ul>');
             }

            sum += parseInt($('#' + e.target.name + " li").attr("value"));
             if(isNaN(sum))
                 sum = 0;
            if ($(this).is(':checked')){    
                    sum += price;          
                }
                else{
                    sum -= price;                   
                }
             $('#' + e.target.name + " li").remove();
            $('#' + e.target.name).append('<li value="' + sum + '">Cost: $'+sum+'</li>');
        });
    });

http://jsfiddle.net/dfzrt3qt/4/

我可以使用事件定位同时追加父母和子女吗？

1 个答案: