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

时间：2018-06-07 11:05:47

标签： javascript php jquery

我有这个函数在调用ajax时返回，但是该函数只返回post中第一个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>';

1 个答案:

答案 0 :(得分：0)

您的代码存在一些问题。

我认为您提供的PHP代码是某种循环：$ id_post建议您循环访问某些数据并为每个帖子打印此HTML。

如果它在一个循环中，你将在你的文档中为每个循环：

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

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

由于您在reactionEmoji函数中使用displayReaction ID，因此您可能需要修复此问题：

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独特的
  • 我更正了您的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>

相关问题
最新问题