使用 jquery 将特定值发布到特定 div

Question

如何让 jquery 将特定 span 中的值发布到 php，然后将值获取到特定 div？我想要这样的东西：点击类“更多”的跨度，将值从这个li发布到php，然后通过jquery获取id为“test”的div。

这里我有一个 php 给我的代码。如果需要，我可以为元素添加唯一的“id”。

 <li>
    <span class="word">one word</span>
    <span class="numb">1</span>

    <span class="more">more</span>
    <div id="test"></div>
 </li>
 <li>
    <span class="word">another word</span>
    <span class="numb">13</span>

    <span class="more">more</span>
    <div id="test"></div>
 </li>

问题是使用这个 jquery 我只发布了包含类“.word”的第一个跨度，但我只想发布跨度所在的跨度而不是它。并再次将值获取到第一个 id 为“test”的 div，而是在单击 span 的 div 中。我的 jquery 代码是：

 $('.more').live("click",function() {

 var ID = $('.word').test();
 var DI = $('.numb').text();


      $.ajax({
           type:"POST",
           data: "value="+ ID + "&numb="+ DI,
           cache: false, 
           url: "more.php",
           success: function(msg){
                $('#test').html(msg).fadeIn('slow');
           }               
      });     
 });

通过将 var ID = $(this).attr("id"); 而不是 var ID = $('.word').test(); 添加到 jquery 和 php <span id="<?php echo $word; ?>" class="more">more</span> 我可以发布 word 的唯一值。但是其他值呢？主要问题是发布到跨度按钮“更多”所在的下一个div。

Answer 1

var ID = $('.word').test();

替换为

var ID = $('.word').text();

另外请使用.on jQuery 函数而不是.live，因为.live 已弃用。

完整的 jQuery 代码

$(function()
{
    $('.more').on("click",function()
    {
        var clickedDiv = $(this);
        var ID = clickedDiv.parent().find('.word').text();
        var DI = clickedDiv.parent().find('.numb').text();

        $.ajax(
        {
            type:"POST",
            data: "value="+ ID + "&numb="+ DI,
            cache: false, 
            url: "more.php",
            success: function(msg)
            {
                clickedDiv.find('div[custom_id="test"]').html(msg).fadeIn('slow');
            }               
        });     
    });
});

还有一件事不要对DOM重复相同的ID。

ID 必须是唯一的。

为此我使用了<div custom_id = "test"></div>

更新的 HTML

<li>
    <span class="word">one word</span>
    <span class="numb">1</span>

    <span class="more">more</span>
    <div custom_id = "test"></div>
</li>
<li>
    <span class="word">another word</span>
    <span class="numb">13</span>

    <span class="more">more</span>
    <div custom_id = "test"></div>
</li>

Answer 2

如果您没有在 php 端做任何事情，即使没有 ajax 请求也可以解决。 检查此代码：

在 html 中使用 class 而不是 id 制作 div。

<li>
    <span class="word">one word</span>
    <span class="numb">1</span>

    <span class="more">more</span>
    <div class="test"></div>
 </li>
 <li>
    <span class="word">another word</span>
    <span class="numb">13</span>

    <span class="more">more</span>
    <div class="test"></div>
 </li>

然后

$('.more').click(function (){

 var ID = $('.word').text();
 var DI = $('.numb').text();

 var Data = "value="+ ID + "&numb="+ DI;

 $(this).closest('.test').html(Data); // use anyone of them
 or 
 $(this).sibling('.test').html(Data); // use anyone of them

});

这将完美地工作。这是更新的代码