Question

我正在使用一个模板作为容器的前置，并且它正常工作，除了我希望元素淡入。但是当我使用hide（）函数时，该元素仍然可见。

$('.newQuestion').on('click', function() {
    var template = document.querySelector('#newQuestion');
    var clone = document.importNode(template.content, true);
    $('.questionsList').prepend(clone);
    $(clone).hide(); //not hidden
    // $(clone).fadeIn(); <-- want to do this but needs to be hidden first
  });

这是一个小提琴：https://jsfiddle.net/1q1o4cao/3/点击按钮，模板已添加，但未隐藏。

了解更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode

Answer 1

importNode的返回值为DocumentFragment。您正在将DocumentFragment的元素追加（移动）到另一个元素。现在片段为空，调用hide无效。

一种选择是使用.childNodes的{{1}}属性创建集合，然后调用DocumentFragment方法：

.hide()

https://jsfiddle.net/ty146t5o/

Answer 2

你这样做

$(".questionsList div").hide();

Answer 3

这是一个工作小提琴：https://jsfiddle.net/wv2q9jvj/1/

您需要做的是使用Jquery选择器选择节点：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
    <tbody>
        <tr class="even">
            <th class="parcelas">Nº de Parcelas</th>
            <th class="valor">Valor de cada parcela</th>
        </tr>
        
        <tr class="even">
            <td class="parcelas">X S/JUROS</td>
            <td>R$   600,00</td>
        </tr>
        
        <tr>
            <td class="parcelas">2X S/JUROS</td>
            <td>R$   300,00</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">3X S/JUROS</td>
            <td>R$   200,00</td>
        </tr>
        
        <tr>
            <td class="parcelas">4X S/JUROS</td>
            <td>R$   150,00</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">5X S/JUROS</td>
            <td>R$   120,00</td>
        </tr>
        
        <tr>
            <td class="parcelas">6X S/JUROS</td>
            <td>R$   100,00</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">7X S/JUROS</td>
            <td>R$   85,71</td>
        </tr>
        
        <tr>
            <td class="parcelas">8X S/JUROS</td>
            <td>R$   81,87</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">9X S/JUROS</td>
            <td>R$   73,47</td>
        </tr>
        
        <tr>
            <td class="parcelas">10X S/JUROS</td>
            <td>R$   66,76</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">11X S/JUROS</td>
            <td>R$   64,81</td>
        </tr>
        
        <tr>
            <td class="parcelas">12X S/JUROS</td>
            <td>R$   60,24</td>
        </tr>    
    </tbody>
</table>

使用：首先选择第一个包含新问题的子元素。然后你可以隐藏它并淡入：

var $newQ = $('.questionsList div:first');

Answer 4

这适用于您的示例。代码少，效果相同。
https://jsfiddle.net/1q1o4cao/7/

$('.newQuestion').on('click', function() {
    $('.questionsList').prepend($("#newQuestion").html());
    $('.questionsList div:first-child').hide().fadeIn();
});

如果你喜欢它，甚至可以在一条线上 https://jsfiddle.net/1q1o4cao/8/

$('.questionsList').prepend($("#newQuestion").html()).find("div:first-child").hide().fadeIn();

使用JQuery隐藏模板/导入的节点 - hide（）无法正常工作

4 个答案: