引导模式未正确填充

Question

所以我有一些模态框，它们应该根据它们引用的内容框有自己的内容。当用户单击放大按钮（看起来像灰色“X”的按钮）时，模态应该会弹出其中包含该信息的信息，但是每个模态都只包含第一个模态信息。我相信我已经将其范围缩小到 javascript，但我不确定它有什么问题，因为我认为它应该可以工作。无论如何，这里是包含所有代码的 codepen，包括 css、html 和 javascript，或者只是下面的 javascript 代码。您还可以通过单击视图下拉按钮并选择地图或表格来更改第一个和第三个模式中的内容。谢谢

Codepen：http://codepen.io/MarkBond/pen/VLpXjB

JAVASCRIPT：

        // Get all list options
    var listOptions = $('ul.dropdown-menu > li > a');

    // Attach "click" event
    listOptions.click(function(ev) {
      var href = $(this).attr('href');
      var divToShow = $(href);

      // Find divs with content
      var contentDivs = divToShow.parent().find('.content');

      // Toggle "active" classes
      contentDivs.removeClass('active');
      divToShow.addClass('active');
    });

//THIS IS WHERE I THINK THE START OF THE PROBLEM IS
    $(document).ready(function() {

      $('[data-target="#enlargeElementModal"]').on('click', function() {
        $('#enlargeElementModal .modal-body').html($('.content.active').html());
      });
      $('[data-target="#enlargeStrategyModal"]').on('click', function() {
        $('#enlargeStrategyModal .modal-body').html($('.content.active').html());
      });

      $('[data-target="#enlargeVariableModal"]').on('click', function() {
        $('#enlargeVariableModal .modal-body').html($('.content.active').html());
      });
    });
//END OF WHERE I THINK PROBLEM IS

Answer 1

你的问题在这部分$('.content.active').html()。该 sn-p 找到第一个这样的 DOM 元素，该元素恰好更接近第一个“放大”按钮。您必须更准确地使用选择器。例如，提供 .ibox-content div 的 ID 并将选择器更改为 $('#ibox-1 .content.active').html()。

这是您修改后的笔 - http://codepen.io/h8every1/pen/oXZVey。 中间部分还是有问题，希望你自己解决。