Question

我有这个问题，我相信我以前已经解决过了，但是因为我的生活不能再把它搞清楚了。我想要发生的是一个人点击一个混合图块，它将该图块的特色图像克隆到它所做的混合区域中，但它会使用它来获取其他所有图像。我只希望它不再抓取点击的元素img。

我的循环确实会将数值添加到混合切片num-<?php echo $i++; ?>

因此，即使是一个可以解决该唯一类的工作解决方案也可以用于克隆。

更新

为了不将图片连续添加到重复的.color-img，它必须抓住课程并将其注入<li>，然后还有一些如何将其添加到appendTo因此，当单击该项时，它只会将其添加到新创建的框中。

$(function() {
    $(".blend-tile").click(function() {
        $("#mixer ul.mixers").append('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div></div><div class="t-align"><div class="mix-value"></div></div></div></li>'), slideumus();
        $(".blend-tile .tpic").clone(true, true).contents().appendTo('.color-img');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- wordpress Loop -->
<li class="blend-tile align num-<?php echo $i++; ?>">
    <div class="tpic">
        <?php the_post_thumbnail( 'thumb-blend' ); ?>
    </div>
    <section class="infora">
        <h2>
            <?php the_title(); ?>
        </h2>
        <p class="price">
            <span class="amount">
            &pound;
                <?php 
                    $available_variations = $product->get_available_variations();
                    $variation_id = $available_variations[0]['variation_id'];
                    $variable_product1 = new WC_Product_Variation( $variation_id );
                    $regular_price = $variable_product1 ->regular_price; 
                    echo $regular_price;?>
                </span>
            </p>
        </section>
    </li>
    <!-- end of wordpress Loop -->
    <div id="mixer" class="t-align">
        <ul class="mixers"></ul>
    </div>

Answer 1

嗯，你没有选择被点击的那个，你有一个选择器内部选择所有元素。您可以使用this获取被点击的内容，然后使用find获取内部元素。

$(".blend-tile .tpic").clone...

需要

$(this).find(".tpic").clone...

如果你有多个.color-img'，你的代码也会失败，因为它会附加到每个元素上。如果您只想附加到已创建的那个，那么您将不得不保留对刚刚添加的引用的引用。

var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div></div><div class="t-align"><div class="mix-value"></div></div></div></li>');

$("#mixer ul.mixers").append(li);
slideumus(); //no clue hy this was there with a comma
$(this).find(".tpic").clone(true, true).contents().appendTo(li.find('.color-img'));

Answer 2

你可以试试这个：

$(".tpic", this).clone(true, true).contents().appendTo('.color-img');

因为如果你这样做

$(".blend-tile .tpic").clone(true, true).contents().appendTo('.color-img');

它会将.tpic克隆到您的网页中。

Jquery仅克隆单击的元素内容

2 个答案: