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()。该片段首先找到了这样的DOM元素，它恰好接近第一个＆＃34; Enlarge＆＃34;按钮。你必须更精确地使用选择器。例如，为.ibox-content div提供ID，并将选择器更改为$('#ibox-1 .content.active').html()。

在这里修改了你的笔 - http://codepen.io/h8every1/pen/oXZVey。中间部分仍然存在一些问题，但希望你能自己修复它。

Bootstrap模态没有正确填充

1 个答案: