Question

我在wordpress工作，这是一个ajax调用，我希望将行的结果返回给id为#hero的div。现在，因为结果是for循环，并且每行中有一个英雄div。表单有多个提交按钮。按下特定行的提交按钮应该只将结果返回到该行的#hero div。我的意思是最近的div（下一个id为英雄的div）。 ajax调用在第一次单击时返回结果，结果显示在hero id div中。但是当我再次按下提交按钮时它不起作用。请注意，它们是与表单相关联的多个提交按钮，它们基本上是星星，因为我正在尝试在wordpress中构建星级评级系统。

的jQuery

jQuery(function ($) {
    $(document).on("click",".star", function(e) {
    e.preventDefault();

    var comp = jQuery("#competition").val();
    var aidd = jQuery("#aid").val();
    var myclickvalue= jQuery(this).val();
    //alert(comp+aidd);


         var sentdata =({

            action: 'star',
            clickval:myclickvalue,
            compete:comp,
            id:aidd
        })

     $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton

            $("#hero").html(res);
            return false;
        } //end of function
        ,
        'json');

    }); //end inner function
}); //end main function

PHP代码（我只是粘贴表单代码，整个代码也有其他sql查询等。）

$form.= '<form id="voteform" action="" method="post">';
$form.= "<input id='category' name='category' type='hidden' value='$result->category'>"; 
$form.= "<input id='aid' name='aid' type='text' value='$result->aid'>";
$form.= "Title :".$result->title.'<br>';
$form.= "<div class='mg-image' style='margin-top:15px;'><img id='articlecontest' src='$result->path' width='250' height='250' ></div>" . '<br><br>';


$form.= "<input id='competition' name='competition' type='hidden' value='$result->competition'>";
$form.= "Username :".$result->username.'<br>';

$form.= "<div id='totalvotes'>"."Total Votes:".$result->votessum."<div>".'<br>';
$form.= "<div id='articlesummary'>".$result->articlebody."</div>";

$form.="<div id='clickme' style='color:blue; font-size:16px; font-family: Satisfy, Cursive;'>".'READ MORE'."</div>";
$form.= '<div id="articlebody">'.'This is body text'.$result->body.'</div>';
///////////////
$form.="<input class='star' id='star1' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='1' style='border:0px!important;'>";
$form.="<input class='star' id='star2' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='2' style='border:0px!important;'>";
$form.="<input class='star' id='star3' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='3' style='border:0px!important;'>";
$form.="<input class='star' id='star4' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='4' style='border:0px!important;'>";
$form.="<input class='star' class='star' id='star5'  type='image' type='submit'  name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='5' style='border:0px!important;'>";

$form.='<input class="star" name="star5" src="http://localhost:8080/test/wp-content/uploads/2015/05/star0.png" type="image" type="submit" value="6" /></form>';
///////////////
$form.='<div id="hero">'.'</div>';
}//end of foreach
$response['form']=$form;
    echo json_encode($response['form']);
    exit();

}

Answer 1

您的HTML标记不会为每个提交按钮显示多个同级div#hero，因此您无法实现您在问题中所述的内容。假设每个提交按钮旁边都有$.post(yes.ajaxurl, sentdata, function (res) { //start of funciton $("#hero").html(res); return false; } //end of function , 'json');，您应该更改代码的这一部分：

var element = $(this);
 $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton

            $(element).next(".hero").html(res);
            return false;
        } //end of function
        ,
        'json');

对此：

#hero

但是使用您当前的标记，您应该将代码更改为此代码。我假设您已将.hero更改为var element = $(this); $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton $(element).siblings(".hero").html(res); return false; } //end of function , 'json');

hasMany

按下提交将ajax的结果附加到div

1 个答案: