Question

如何让jquery将特定跨度的值发布到php，然后获取特定div的值？我想要这样的东西：点击带有“更多”类的span，将这个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”的第一个span，但是我只想发布跨度所在的跨度。并且不再将值设置为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');
            }               
        });     
    });
});

对于ID，还有一件事不要重复DOM。

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

});

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

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

2 个答案: