时间戳

首页 > 解决方案 > 单击时仅返回第一个 div 的 id 的 JavaScript 嵌套函数

javascript - 单击时仅返回第一个 div 的 id 的 JavaScript 嵌套函数

问题描述

我有这个函数在调用 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>';

标签： javascriptphpjquery

解决方案

您的代码有几个问题。

我想您提供的 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>

推荐阅读