单击时，JavaScript嵌套函数仅返回第一个div的ID

Question

我有一个在调用ajax时返回的函数，但是该函数仅返回帖子中第一个div的ID，并为下一个元素或div标签重复相同的ID号。 但是，当在带有指定$（this）的单击上使用该函数时，它将返回其他元素的唯一div。 请帮忙。 这是代码。

$(document).on("click", ".likeTypeAction", function () {
    var reaction_id = $('.likeTypeAction');
    var reactionType = $(this).attr("data-reaction");
    var reactionName = $(this).attr("original-title");
    var rel = $(this).parent().parent().attr("rel");
    var x = $(this).parent().parent().attr("id");
    var sid = x.split("reaction");
    var id_post = sid[1];
    var htmlData = '<i class="' + reactionName.toLowerCase() + 'IconSmall likeTypeSmall" ></i>' + reactionName;
    var dataString = 'id_post=' + id_post + '&rid=' + reactionType;

    $.ajax({
        url: 'ajaxReaction',
        type: "post",
        data: {"done": 1, "id_post": id_post, "rid": reactionType},
        beforeSend: function () {
            alert(id_post);
        },
        success: function (data) {
            displayReaction();
        },

    });
});

function displayReaction() {
    a = $("#reactionEmoji");
    var cls = $(this.a).parent().attr('class');
    var n = cls.split("reaction");
    var reactionNew = n[1];

    $.ajax({
        url: 'ajaxReaction',
        type: "post",
        data: {
            "getReaction": 1, "reactionNew": reactionNew
        },
        beforeSend: function () {
            alert(reactionNew);
        },
        success: function (data) {

        }
    })
}

myInstance = new displayReaction();

echo '<div id="reaction" class="reaction' . $id_post . '">
    <div id="reactionEmoji">nothing</div>
</div>';
echo'<div class="reaction-action">';
echo '<div rel="unlike" c="undefined" id="reaction' . $id_post . '" class="likeDiv">
    <div class="tooltipster-content">
        <span class="likeTypeAction" original-title="Like" data-reaction="1">
            <i class="likeIcon likeType"></i>
        </span>
        <span class="likeTypeAction" original-title="Amei" data-reaction="2">
            <i class="ameiIcon likeType"></i>
        </span>
        <span class="likeTypeAction" original-title="Haha" data-reaction="3">
            <i class="hahaIcon likeType"></i>
        </span>
        <span class="likeTypeAction" original-title="Uau" data-reaction="4">
            <i class="uauIcon likeType"></i>
        </span>
        <span class="likeTypeAction" original-title="Triste" data-reaction="5">
            <i class="tristeIcon likeType"></i>
        </span>
        <span class="likeTypeAction last" original-title="Grr" data-reaction="6">
            <i class="grrIcon likeType"></i>
        </span>
    </div>
    <div class="tooltipster-arrow-top tooltipster-arrow" style="">
        <span class="tooltipster-arrow-border" style="margin-bottom: -1px; border-color: rgb(222, 222, 222);"></span>
        <span style="border-color:rgb(255, 255, 255);"></span>
    </div>
</div>';

Answer 1

您的代码有几个问题。

我想您提供的PHP代码处于某种循环中：$ id_post建议您循环一些数据并为每篇文章打印此HTML。

如果它在一个循环中，那么您将在文档中包含每个循环：

<div id="reaction" class="reaction' . $id_post . '">
    <div id="reactionEmoji">nothing</div>
</div>

您不能有多个具有相同ID的HTML元素。

而且，由于您使用的是reactionEmoji ID在你displayReaction功能，你可能要解决这个问题：

function displayReaction() {
    a = $("#reactionEmoji");
    var cls = $(this.a).parent().attr('class');
    var n = cls.split("reaction");
    var reactionNew = n[1];
    /* .... */
    alert(reactionNew);
}

在下面的代码段中：

• 我用3个HTML生成的代码替换了您的PHP代码
• 我添加了一些标签来替换您的图标（我们没有您的CSS）
• 我使两个div ID都唯一
• 我更正了displayReaction函数，使其将要显示的反应的ID作为参数。

我不确定它是否可以满足您的要求，但是它应该可以帮助您解决问题。

 $(document).on("click",".likeTypeAction",function() { var reaction_id = $('.likeTypeAction'); var reactionType=$(this).attr("data-reaction"); var reactionName=$(this).attr("original-title"); var rel=$(this).parent().parent().attr("rel"); var x=$(this).parent().parent().attr("id"); var sid=x.split("reaction"); var id_post =sid[1]; var htmlData='<i class="'+reactionName.toLowerCase()+'IconSmall likeTypeSmall" ></i>'+reactionName; var dataString = 'id_post='+ id_post +'&rid='+reactionType; displayReaction(id_post); /* $.ajax({ url: 'ajaxReaction', type: "post", data: {"done":1, "id_post":id_post, "rid":reactionType}, beforeSend: function(){alert(id_post);}, success: function(data){ }, });*/ }); function displayReaction(id_post){ a = $("#reactionEmoji" + id_post); var cls = $(this.a).parent().attr('class'); var n = cls.split("reaction"); var reactionNew = n[1]; $.ajax({ url: 'ajaxReaction', type: "post", data: { "getReaction":1,"reactionNew":reactionNew }, beforeSend: function(){ alert(reactionNew); }, success: function(data){ } }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="reaction" class="reaction1"> <div id="reactionEmoji1">nothing</div> <div class="reaction-action"> <div rel="unlike" c="undefined" id="reaction1" class="likeDiv"> <div class="tooltipster-content"> <span class="likeTypeAction" original-title="Like" data-reaction="1"> <i class="likeIcon likeType">like</i> </span> <span class="likeTypeAction" original-title="Amei" data-reaction="2"> <i class="ameiIcon likeType">Amei</i> </span> <span class="likeTypeAction" original-title="Haha" data-reaction="3"> <i class="hahaIcon likeType">Haha</i> </span> <span class="likeTypeAction" original-title="Uau" data-reaction="4"> <i class="uauIcon likeType">Uau</i> </span> <span class="likeTypeAction" original-title="Triste" data-reaction="5"> <i class="tristeIcon likeType">Triste</i> </span> <span class="likeTypeAction last" original-title="Grr" data-reaction="6"> <i class="grrIcon likeType">Grr</i> </span> </div> <div class="tooltipster-arrow-top tooltipster-arrow" style=""> <span class="tooltipster-arrow-border" style="margin-bottom: -1px; border-color: rgb(222, 222, 222);;"/> <span style="border-color:rgb(255, 255, 255);"/> </div> </div> </div> </div> <div id="reaction" class="reaction2"> <div id="reactionEmoji2">nothing</div> <div class="reaction-action"> <div rel="unlike" c="undefined" id="reaction2" class="likeDiv"> <div class="tooltipster-content"> <span class="likeTypeAction" original-title="Like" data-reaction="1"> <i class="likeIcon likeType">like</i> </span> <span class="likeTypeAction" original-title="Amei" data-reaction="2"> <i class="ameiIcon likeType">Amei</i> </span> <span class="likeTypeAction" original-title="Haha" data-reaction="3"> <i class="hahaIcon likeType">Haha</i> </span> <span class="likeTypeAction" original-title="Uau" data-reaction="4"> <i class="uauIcon likeType">Uau</i> </span> <span class="likeTypeAction" original-title="Triste" data-reaction="5"> <i class="tristeIcon likeType">Triste</i> </span> <span class="likeTypeAction last" original-title="Grr" data-reaction="6"> <i class="grrIcon likeType">Grr</i> </span> </div> <div class="tooltipster-arrow-top tooltipster-arrow" style=""> <span class="tooltipster-arrow-border" style="margin-bottom: -1px; border-color: rgb(222, 222, 222);;"/> <span style="border-color:rgb(255, 255, 255);"/> </div> </div> </div> </div> <div id="reaction" class="reaction3"> <div id="reactionEmoji3">nothing</div> <div class="reaction-action"> <div rel="unlike" c="undefined" id="reaction3" class="likeDiv"> <div class="tooltipster-content"> <span class="likeTypeAction" original-title="Like" data-reaction="1"> <i class="likeIcon likeType">like</i> </span> <span class="likeTypeAction" original-title="Amei" data-reaction="2"> <i class="ameiIcon likeType">Amei</i> </span> <span class="likeTypeAction" original-title="Haha" data-reaction="3"> <i class="hahaIcon likeType">Haha</i> </span> <span class="likeTypeAction" original-title="Uau" data-reaction="4"> <i class="uauIcon likeType">Uau</i> </span> <span class="likeTypeAction" original-title="Triste" data-reaction="5"> <i class="tristeIcon likeType">Triste</i> </span> <span class="likeTypeAction last" original-title="Grr" data-reaction="6"> <i class="grrIcon likeType">Grr</i> </span> </div> <div class="tooltipster-arrow-top tooltipster-arrow" style=""> <span class="tooltipster-arrow-border" style="margin-bottom: -1px; border-color: rgb(222, 222, 222);;"/> <span style="border-color:rgb(255, 255, 255);"/> </div> </div> </div> </div>