如何为具有相同ID的动态按钮指定不同的操作onclick

时间:2015-07-31 13:13:15

标签: javascript jquery html css

我有三个具有相同ID的按钮。它们会动态添加到页面中。



<div class="row" id=rigacite">
<p id="corpo">
  some text some text
  some text some textsome text some textsome text some textsome text some textsome text some textsome text some textsome text some textsome text some textsome text some textsome text some text
  <button id="show"> </button>
  </p>
<p id="corpo">
  other text other text other text other textother text other textother text other textother text other textother text other textother text other textother text other textother text other textother text other textother text other textother text other textother text other text
  <button id="show"> </button>
  </p>
<p id="corpo">
another text another textanother textanother textanother textanother textanother textanother textanother textanother textanother textanother text
  <button id="show"> </button>
  </p>
</div>
&#13;
&#13;
&#13;

当我点击其中一个时,我希望它显示其父级的内容

。每个父母

都有不同的文字。我怎样才能做到这一点?我写这段代码,

&#13;
&#13;
var $t = jQuery.noConflict();
$t(document).ready(function() {
	
	    $t('#rigacite #corpo').each(function()
	    {
		    var maxLength = 90;
			var myStr = $t(this).text();
			
			if(myStr.trim().length>maxLength)
			{
				var newString, removedStr;

				newString = myStr.substring(0, maxLength);
				removedStr = myStr.substring(maxLength, myStr.trim().length);
				
				$t(this).empty().html(newString);
				
				$t(this).append('<br/><br/><button id="show" class=" btn fa fa-plus-circle"></button>');
				
				
				
				$t(document).on("click", "#show", function()
				{
					
					$t(this.parentNode).html(newString+removedStr);
					
					
				});
					
				
			}
		});
});
&#13;
&#13;
&#13;

当我点击第一个时它起作用,但是当我点击其他的时,会显示第一个父项的相同文本。有人能帮助我吗?提前谢谢。

1 个答案:

答案 0 :(得分:1)

一旦你修复了HTML中的id问题以使用class而不是id(参见小提琴),你就可以使用这样的东西:

$('.show').on('click', function(){
    alert($(this).parent().text());
});

Here's a fiddle

您可以将此手柄直接放在ready功能中,而不是将其放在each()功能中。

编辑:也可以在单击手柄中完成每个函数内部的整个字符串操作。只需获取按钮父级的字符串;基本上取代这个

var myStr = $t(this).text();  // here 'this' is the paragraph

var myStr = $t(this).parent().text();   // here 'this' is the button