如何在HTML（）中删除克隆？

问题描述 投票：0回答：4

我有以下代码的问题。当我点击“klik small”时，它看起来很好，即使我点击了几次。答案仍然是一样的。结果如下

<div class="A">
    <div class="E">TEST</div>
</div>

但是，如果我点击“klik large”按钮，第一次点击似乎很好。但是，如果同一次点击不止一次，会产生更多像这样的克隆

<div class="A">
    <div class="B">
        <div class="C">
            <div class="D">
                <div class="B">
                    <div class="C">
                        <div class="D">
                            <div class="B">
                                <div class="C">
                                    <div class="D">
                                        <div class="E">TEST</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我如何在第一次点击时停止它，如果我点击它几次，结果与第一次相同？

$(document).on('click', '.small', function(e) {
  var TEXT = $(".A .D").html();
	$('.A').html( TEXT );
});

$(document).on('click', '.large', function(e) {
  var TEXT = $(".A").html();
	$('.A').html( '<div class="B"><div class="C"><div class="D">'+TEXT+'</div></div></div>' );
});
 

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
    <div class="B">
        <div class="C">
            <div class="D">
                <div class="E">TEST</div>
            </div>
        </div>
    </div>
</div>
<br><br><br><br><br>
<button class="button small">Klik small</button>
<button class="button large">Klik large</button>

================= UPDATE ================

如果我正在寻找TEXT的答案，很多人都会回答，但我问了元素

请检查这个http://jsfiddle.net/yzdjme0k/12/我在问什么？如果我调整window.width浏览器的大小，如果window.width> 1024px，它将调出代码<div class="scroll-magnet-container"><div class="scroll-magnet-item is-scrolling"><div class="column-container"><div class="column-contents">为<div class="fixed-wrapper"><div class="scroll-magnet-container"><div class="scroll-magnet-item is-scrolling"><div class="column-container"><div class="column-contents"><div class="content">..... blah blah blah

但如果window.width尺寸小于<1024px。上面的代码将被删除。成为<div class="fixed-wrapper"><div class="content">..... blah blah blah

但是，因为我使用resize功能。那么在1px增加的任何window.width宽度将激活函数html()

或者你可以看到片段底部

$(window).bind("load resize", function() {
    if ($(window).outerWidth() > 1024) {
        $('.fixed-wrapper').html('<div class="scroll-magnet-container"><div class="scroll-magnet-item is-scrolling"><div class="column-container"><div class="column-contents"><div class="content">'+$(".fixed-wrapper .content").html()+'</div></div></div></div>');
    } else  {
        $('.fixed-wrapper').html($(".fixed-wrapper .column-contents").html());
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-wrapper">
    <div class="scroll-magnet-container" style="height: 5412px;">
        <div class="scroll-magnet-item is-bottomed" style="width: 326.438px; top: auto;">
            <div class="column-container">
                <div class="column-contents">
                    <div class="content">
                        <div class="description display-block-smartphone-portrait">
                            <div>
                                <a class="view-product-details-smartphone toggle-details-mobile view" style="">View Details</a>
                                <a class="view-product-details-smartphone toggle-details-mobile close" style="display: none;">Hide Details</a>
                            </div>

                            <div class="product-details-smartphone" style="display: none;">
                                <div class="vspace1 product-description-text">
                                    <div><span>181349M223006</span></div>
                                    <div><span>Distressed supple leather loafers in white. Round toe. Pull-loop at heel collar. Leather and rubber sole in tan and grey. Tonal stitching.</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="span16 price-container hidden-smartphone-landscape-price">
                                <h3 class="price">
                                    <span class="price sale">$590 USD</span>
                                    <span class="price"> $277 USD</span>
                                </h3>
                                <meta itemprop="price" content="277">
                                <meta itemprop="priceCurrency" content="USD">
                            </div>
                            <div class="span16 promotions-container">
                                <div data-v-1dd5763a="">
                                    <div class="vspace2 display-block-smartphone-portrait"></div>
                                    <p>You save 53%</p>
                                    <div>
                                        <p class="promotions-container shipping-note"></p>
                                    </div>
                                    <div class="vspace1 display-block-smartphone-portrait"></div>
                                </div>
                            </div>
                        </div>
                        <div class="add-to-bag-form">
                            <div class="span16">
                                <div>
                                    <div class="vspace1">
                                        <div class="">
                                            <a href="#" class="btn-show-chart">
            View Size Chart
          </a>
                                        </div>
                                    </div>
                                    <div style="position: relative;">
                                        <select id="size" name="size" class="vspace2">
																																					<option disabled="disabled" value="SELECT A SIZE">SELECT A SIZE</option>
																																					<option value="39_181349M22300601">
          IT 39 - Only one left
        </option>
																																					<option disabled="disabled" value="39.5_181349M22300602">
          IT 39.5 - Sold Out
        </option>
																																					<option value="40_181349M22300603">
          IT 40 - Only one left
        </option>
																																					<option disabled="disabled" value="40.5_181349M22300604">
          IT 40.5 - Sold Out
        </option>
																																					<option value="41_181349M22300605">
          IT 41 - Two items left
        </option>
																																					<option disabled="disabled" value="41.5_181349M22300606">
          IT 41.5 - Sold Out
        </option>
																																					<option value="42_181349M22300607">
          IT 42
        </option>
																																					<option disabled="disabled" value="42.5_181349M22300608">
          IT 42.5 - Sold Out
        </option>
																																					<option disabled="disabled" value="43_181349M22300609">
          IT 43 - Sold Out
        </option>
																																					<option disabled="disabled" value="43.5_181349M22300610">
          IT 43.5 - Sold Out
        </option>
																																					<option disabled="disabled" value="44_181349M22300611">
          IT 44 - Sold Out
        </option>
																																					<option disabled="disabled" value="44.5_181349M22300612">
          IT 44.5 - Sold Out
        </option>
																																					<option value="45_181349M22300613">
          IT 45 - Only one left
        </option>
																																					<option disabled="disabled" value="45.5_181349M22300614">
          IT 45.5 - Sold Out
        </option>
																																					<option disabled="disabled" value="46_181349M22300615">
          IT 46 - Sold Out
        </option>
																																				</select>
                                        <!---->
                                    </div>
                                </div>
                            </div>
                            <form type="post" id="addBagForm">
                                <div class="span16 vspace1">
                                    <div data-v-f4bdd476="">
                                        <div id="pdp-bag-captcha" class="g-recaptcha"></div>
                                    </div>
                                    <button type="submit" class="button full-width btn-add-to-bag button no-border button-primary">
																																				<span class="button-label">Add to bag</span>
																																				<span class="load-wrapper" style="display: none;">
																																					<span class="load-animation">
																																						<span class="dot" style="width: 3px; height: 3px; border-radius: 3px; margin-right: 12px; animation: blink 0.45s step-end 0s infinite;"></span>
																																						<span class="dot" style="width: 3px; height: 3px; border-radius: 3px; margin-right: 12px; animation: blink 0.45s step-end 0.075s infinite;"></span>
																																						<span class="dot" style="width: 3px; height: 3px; border-radius: 3px; margin-right: 0px; animation: blink 0.45s step-end 0.15s infinite;"></span>
																																					</span>
																																				</span>
																																			</button>
                                </div>
                            </form>
                            <!---->
                            <div>
                                <form type="post">
                                    <div class="span16 vspace1">
                                        <div>
                                            <div id="pdp-wishlist-captcha" class="g-recaptcha"></div>
                                        </div>
                                        <button type="submit" class="button no-border heart-icon">
																																					<span class="button-label">Add to wishlist</span>
																																					<span class="load-wrapper" style="display: none;">
																																						<span class="load-animation">
																																							<span class="dot" style="width: 3px; height: 3px; border-radius: 3px; margin-right: 12px; animation: blink 0.45s step-end 0s infinite;"></span>
																																							<span class="dot" style="width: 3px; height: 3px; border-radius: 3px; margin-right: 12px; animation: blink 0.45s step-end 0.075s infinite;"></span>
																																							<span class="dot" style="width: 3px; height: 3px; border-radius: 3px; margin-right: 0px; animation: blink 0.45s step-end 0.15s infinite;"></span>
																																						</span>
																																					</span>
																																				</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
javascript jquery html
4个回答
0
投票

我真的不明白最终结果应该是什么样子但是我可以帮助你向你展示导致问题的原因。

var TEXT = $(".A").html();在这一行你得到了A类的每个元素的html。你没有得到TEXT内容但完整的html内容，这将是<div class='[...]所以现在你的文本变量已经有两个div。在下一行中，您将再创建两个div，然后将TEXT的内容附加到其中。这意味着您复制了div元素。

0
投票

在Klik大点击上将你的$(".A").html();替换为$(".A").text();，因为你正在选择.A选择器的所有html对象。 $(".A").text()将获取匹配元素集合中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。

$(document).on('click', '.small', function(e) {
    var TEXT = $(".A .D").html();
    $('.A').html(TEXT);
});

$(document).on('click', '.large', function(e) {
    var TEXT = $(".A").text().trim();
    $('.A').html(`<div class="B">
	<div class="C">
	<div class="D">
	${TEXT}
	</div>
	</div>
	</div>`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
	<div class="B">
		<div class="C">
			<div class="D">
				<div class="E">TEST</div>
			</div>
		</div>
	</div>
</div>
<br><br><br><br><br>
<button class="button small">Klik small</button>
<button class="button large">Klik large</button>
0
投票

尝试下面的代码使用类.A和类.D的组合，以避免重复在Klik大也添加类.E div如果组合未找到

$(document).on('click', '.small', function(e) {
  var TEXT = $(".A .D").html();
	$('.A').html( TEXT );
});

$(document).on('click', '.large', function(e) {
  var TEXT = $(".A .D").html() ? $(".A .D").html() : '<div class="E">TEST</div>';
	$('.A').html( '<div class="B"><div class="C"><div class="D">'+TEXT+'</div></div></div>' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
	<div class="B">
		<div class="C">
			<div class="D">
				<div class="E">TEST</div>
			</div>
		</div>
	</div>
</div>
<br><br><br><br><br>
<button class="button small">Klik small</button>
<button class="button large">Klik large</button>
0
投票

-------------------------------更新------------------ ----------------------

您可以通过两种方式完成此操作。您可以在激活.html之前检测.fixed-wrapper的子元素是什么，或者您可以使用变量来检查窗口的宽度是否已经调整为1024以下或1024以上

一个例子如下：

var isLayout1024 = false;
$(window).bind("load resize", function() {
    if ($(window).outerWidth() > 1024 && !isLayout1024) {
    	isLayout1024 = true;
        $('.fixed-wrapper').html('<div class="scroll-magnet-container"><div class="scroll-magnet-item is-scrolling"><div class="column-container"><div class="column-contents"><div class="content">'+$(".fixed-wrapper .content").html()+'</div></div></div></div>');
    } else if($(window).outerWidth() <= 1024 && isLayout1024)  {
    	isLayout1024 = false
        $('.fixed-wrapper').html($(".fixed-wrapper .column-contents").html());
    }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.