Question

如果点击此代码，我有按钮显示电话号码：

var shortNumber = $("#phone_ch").text().substring(0,  $("#phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$("#phone_ch").hide().after('<div id="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div#clickToShowPc)').addClass('xoom_c');
$("#clickToShowPc , #phone_cc").click(function() {
  $("#phone_ch").show();
  $("#phone_cc").hide();
  $("#clickToShowPc").hide();
});

我尝试用这段代码克隆它：

$( ".phone_c" ).clone(true , true).attr('class', 'phone_c col-lg-6').appendTo( ".main-section" );

这是原始按钮HTML：

<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
  <span id="phone_ch" style="display: none;">  012 73962304</span><div id="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);">  01X XXXXXXXX</div>
  <div id="phone_cc">Show phone</div>
</div>

克隆按钮但显示隐藏的元素，如果我点击它，它将显示原始元素的隐藏元素。

有人可以用正确的代码告诉我吗？

我试图在这里搜索，我发现我需要启用

.clone(true , true)

在我的代码中。而且我也找到了一些关于复制ID的内容，但我不清楚，我没能解决我的问题。

谢谢

Answer 1

当您克隆div＆＃34; .phone_c＆＃34;时，您将拥有多个具有相同ID的元素。因此，当您使用DOM选择器＆＃34; #phone_cc＆＃34;时，它将选择第一个，因为它的工作原理。如果你有：

<span class="phone_ch" style=...

所以你可以使用DOM Selector＆＃34; .phone_cc＆＃34;并且将选择具有该类的所有元素。现在，您只想显示和隐藏元素＆＃34; near＆＃34;克隆的点击元素。为此，您必须使用类而不是ID。

<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span class="phone_ch" style="display: none;">  012 73962304</span>
<div class="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);">  01X XXXXXXXX</div>
<div class="phone_cc">Show phone</div>
</div>

然后尝试联系父元素以接触孩子：

    var shortNumber = $(".phone_ch").text().substring(0, $(".phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";

$(".phone_ch").hide().after('<div class="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');

$('section:has(div.price_c,div.contact_name_info,div.clickToShowPc)').addClass('xoom_c');

$(".clickToShowPc , .phone_cc").click(function() {
  var parent = $(this).parent();
  $(".phone_ch", parent).show();
  $(".phone_cc", parent).hide();
  $(".clickToShowPc", parent).hide();
});

我希望这会有所帮助。

无法使用jQuery单击单击函数克隆按钮

1 个答案: