jQuery- 我需要根据选项隐藏div的内容，然后恢复原来的内容...怎么办？

Question

编辑：添加了我的确切代码，而不是简化的示例

计算器溢出。我有一个选项列表，单击它们时，它们会使用数组中的变量填充页面。关闭按钮应将此新内容替换为原始内容。

到那一点为止，但由于 DOM 的性质，事情会被遗忘。我已经研究和试验过，但我再次回到您的指导。

HTML

<div class="main_container">
<a name="top"></a>
<b class="tstmnl_close">[close]</b>
<div class="main_right" id="tstmnl_right">
    
    <div class="tstmnl_column">
        <div class="testimonials">
            Testimonial 1
            <a href="#top" class="tstmnl_readmore" data-value="1">[read more]</a>
            <hr />
        </div>
        <div class="testimonials">
            Testimonial 2
            <a href="#top" class="tstmnl_readmore" data-value="2">[read more]</a>
            <hr />
        </div>
        <div class="testimonials">
            Testimonial 3
            <a href="#top" class="tstmnl_readmore" data-value="3">[read more]</a>
            <hr />
        </div>
    </div>
</div>

jQuery

    var content = [
            "<b>Testimonial 1</b>",
            "Testimonial 2",
            "Testimonial 3"
            ];

$(document).ready(function () {
    
var original = $('#tstmnl_right').clone();

    $('.main_container').on('click', '.tstmnl_readmore', function() {
        var dataValue = $(this).data("value");
        $('#tstmnl_right').empty().append(content[dataValue]-1);
    });

    $('.tstmnl_close').click(function() {
        $('#tstmnl_right').replaceWith(original.clone());
    });
});

我看过这里的示例，但是 none 似乎适合这个应用程序。其他板上的许多其他人已经找到了解决同一问题的方法，但出于某种原因，他们不是这个问题的解决方案！我已经看过好几次了，一定有什么地方我忽略了。

感谢您的观看。

Answer 1

您需要将 data-value 存储在变量中，因为当您在父元素上调用 .empty() 时会丢失数据。
由于您是动态创建元素，因此您需要使用 Event Delegation using .on() 委托事件方法。

使用

$('.main').on('click', '.options', function() {
    var dataValue = $(this).data("value");
    $('.stuff').empty().append(content[dataValue]);
});

DEMO

jQuery- 我需要根据选项隐藏div的内容，然后恢复原来的内容...怎么办？

jQuery- I need to hide contents of div according to option, then restore the original contents... how?

jquery

dom

replace

reset