Question

我有两个模态（基础）。我想根据另一个复选框中设置的值，用一个按钮打开它们。目前，我已经向按钮添加了data-open和data-reveal-id属性，并且它第一次正常工作。之后，虽然这些属性的值正确添加到按钮，但它只会从该按钮打开上次打开的模态。我错过了一些明显的东西吗？

<button class="button" data-open="modal1" id="modal1" data-reveal-id="modal1">Open Modal</button>

Answer 1

我猜你的问题在于你改变按钮属性/数据的方式（使用直接绑定$('#modal1').on('click', function () {//do stuff});）以及你似乎两次使用相同ID的事实（一次在按钮中，一次在模态中）。

这可行（如更改属性和启动正确的模式）但它没有考虑检查两个复选框的状态，因为您没有指定在该点发生的情况。

HTML

<div id="wrapper">
  <div class="row">
    <fieldset class="large-12 columns">
      <legend>Choose an option</legend>
      <input id="checkbox1" type="checkbox">
      <label for="checkbox1">Option 1</label>
      <input id="checkbox2" type="checkbox">
      <label for="checkbox2">Option 2</label>
    </fieldset>
    <button class="button" data-open="" id="modalOpen" data-reveal-id="">Open Modal</button>
  </div>
</div>
<div class="reveal" id="modal1" data-reveal>
  <h1>You picked option ONE</h1>
  <p>Sed sit amet tellus vitae lectus euismod porta. Aliquam convallis ipsum metus, et interdum lorem ultrices a. Donec molestie lacus in lobortis auctor. Praesent eu urna sit amet tortor venenatis accumsan. Vestibulum mattis nunc sit amet ex tempor cursus.
    Vivamus nec dapibus purus. Nunc eu diam at sapien hendrerit bibendum. Quisque interdum erat turpis, eget sodales orci efficitur a. Phasellus nec orci at tortor vulputate blandit. Nunc elementum felis quis felis varius mollis ut vitae libero.</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="reveal" id="modal2" data-reveal>
  <h1>You picked option TWO</h1>
  <p>Nam sed velit quis tortor luctus feugiat. Aenean vestibulum diam massa, at feugiat elit tempus ut. Aliquam ultricies elit ut ante tristique rhoncus. Donec fringilla magna id ante varius, elementum fringilla nibh scelerisque. Maecenas euismod sagittis
    turpis, nec blandit augue finibus eget. Cras nec dui ultricies, condimentum nisl in, finibus odio. Etiam luctus mattis aliquet. Integer aliquam lorem nec consequat finibus. Proin varius purus neque, ut imperdiet eros dignissim ac. Pellentesque ultrices
    tristique sagittis. Morbi et nunc hendrerit turpis eleifend semper eu sit amet enim. Vestibulum placerat id odio a pellentesque. Proin eu metus nec ex commodo posuere iaculis pretium diam.</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JQUERY （由于Foundation使用它来启动模式，我假设您不需要本机JavaScript解决方案）

$('#wrapper').on('click', '#modalOpen', function () {
    if ($('checkbox1').is(':checked')) {
    $(this).attr({
        'data-open': 'modal1',
        'data-reveal-id': 'modal1'
    });
  } else {
    $(this).attr({
        'data-open': 'modal2',
        'data-reveal-id': 'modal2'
    });
  }
});

此脚本使用delegated events确保它获取DOM的最新更改。

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

N.B。您也可以使用$('#modal1').foundation('open')

直接从脚本启动模式

基金会莫代尔开放问题

1 个答案: