Question

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

StackOverflow的。我有一个选项列表，当它们被单击时，它们使用数组中的变量填充页面。关闭按钮应该用原始内容替换这个新内容。

它可以达到这一点，但由于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());
    });
});

我在这里看过这些例子，但似乎没有一个适合这个应用程序。其他板上的许多其他人都找到了解决同样问题的方法，但由于某些原因，他们不是解决方案！我已经多次看到过这种情况，我必须要忽视它。

感谢您的关注。

Answer 1

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

使用

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

DEMO

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

1 个答案: