Javascript 带有 .Ajax() / childNodes 的选择器

Question

<ul id="feature-deals" class="list-products">
    <li>
        <a href="#" class="pname">pink</a>
        <span id="uid">021454</span>
        <span id="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">yellow</a>
        <span id="uid">012447</span>
        <span id="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">violet</a>
        <span id="uid">0127841</span>
        <span id="qty">1</span>
    </li><br>
</ul>

js 脚本

$("#feature-deals li").click(function () {
    $.ajax({            
        url: "phpPage.php",
        type: "POST",
        data: ({
            productId: $(????).text(),
            productType: $(????).text(),
            productQty: $(???).text() 
        }),
        success : function(data){                                                           
            totalItemCart();
            $("#div1").html(data);
        }
    })


    .error(function(){
        alert('error... ohh no!');
    });

});

如何从选定的 li 中获取整个 li 内容（pname、uid、qty）并将其传递给 .ajax()

这是我正在尝试做的事情：

li 内容 --> 获取所有信息(pname,uid,qty) --> 放入 ajax 的数据 --> 传递给 phpPage.php --> return结果

Answer 1

重复 ID 在 html 中无效，我建议使用 class 而不是 ID，然后 select 具有特定 class 的 li 的后代

<ul id="feature-deals" class="list-products">
    <li>
        <a href="#" class="pname">pink</a>
        <span class="uid">021454</span>
        <span class="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">yellow</a>
        <span class="uid">012447</span>
        <span class="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">violet</a>
        <span class="uid">0127841</span>
        <span class="qty">1</span>
    </li><br>
</ul>

$("#feature-deals li").click(function () {
    $.ajax({            
        url: "phpPage.php",
        type: "POST",
        data: ({
            productId: $('.uid',this).text(),
            productType: $('.pname',this).text(),
            productQty: $('.qty',this).text() 
        }),
        success : function(data){                                                           
            totalItemCart();
            $("#div1").html(data);
        }
    })


    .error(function(){
        alert('error... ohh no!');
    });

});

Javascript 带有 .Ajax() / childNodes 的选择器

Javascript Selector with .Ajax() / childNodes

javascript

jquery

ajax

child-nodes