jQuery添加和删除属性

Question

我有一个项目，我们在同一页面上有多个模式。所以想法是从被点击的按钮中获取 id 并将该 id 附加到模态。例子是：

这是我在 plunker 中的代码：bootstrap modal

 <button class="btn btn-readmore" data-toggle="modal" href="modals/serv-cutting.html" data-target="#vividCutting">read more</button>

 <button class="btn btn-readmore" data-toggle="modal" href="modals/serv-color.html" data-target="#vividColor">read more</button>

然后将该 id 属性添加到：

 <div class="modal fade" tabindex="-1" role="dialog" aria-  labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"></div>
    </div>
</div>

所以我有很多模态，我想出了这个 jQuery，就好像我不先删除 id 一样，然后所有触发模态的按钮都保持打开同一个模态：

$('button.btn-readmore').click(function() {
    var newId = $(this).attr('data-target').slice(1);
    console.log(newId);
    if($('.modal').prop('id', newId)){
        $(this).removeProp('id', newId);
    } else {
        $('.modal').prop('id', newId)
    }
});

我认为我很接近，但需要一点建议。

Answer 1

根据您对我之前的回答和您的问题的更新，您似乎想要重新使用相同的模式并根据单击的按钮加载远程内容。

HTML：

<button class="btn btn-readmore" data-toggle="modal" href="modals/serv-color.html" data-target="#modal1">read more 1</button>
<button class="btn btn-readmore" data-toggle="modal" href="modals/serv-cutting.html" data-target="#modal1">read more 2</button>
<div id="modal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>

JavaScript 在隐藏模式后销毁它，以便在每次重新创建远程内容时都可以加载它，由Twitter bootstrap remote modal shows same content everytime 提供

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});