javascript - 选择单选按钮时将类添加到父项的动态弹出菜单(如 Trello 的)

Question

我想创建一个动态弹出菜单，当单选按钮被选中时将一个类添加到“列表”父级//当未被选中时删除类(下面的 HTML 结构不能改变......只能改变 CSS 和 JS)

• 我正在尝试在单击时直接在每个“绿色齿轮”图标下方制作“列表弹出窗口”弹出窗口/在单击关闭时将其隐藏(css 类)。
• 每当从弹出窗口中选择一个单选按钮时，我需要它直接将一个类添加到相应列表的父 div 中，同时不影响任何其他列表。
• 诀窍(对我而言)是通过位于每个列表 div 范围之外的 1 个弹出菜单让所有这些动态发生。
• 不能更改 HTML 结构(这必须完全使用 JS 和 CSS 完成)。

这是我到目前为止所得到的:https://jsfiddle.net/oneeezy/t5eou67k/

$(document).ready(function () {


/* Code to play with for show/hide popup

 


/* Code to play with for adding/removing classes when radio checked

	$('.list-layouts input').click(function () {
        $('.list-layouts input:not(:checked)').parent().removeClass("blue");
        $('.list-layouts input:checked').parent().addClass("blue");
    });    
*/    
    
});

/* Reset Styles */
      * { box-sizing: border-box; margin: 0; padding: 0; }
      h1 { padding: 0 0 .25rem; }
      h2 { line-height: 1.6; }
      aside { background: #e2e4e6; padding: 1rem; color: gray; margin: 1rem; border: 1px dashed gray; }
      aside ul { list-style: inside; }
      aside span { font-style: italic; color: rgba(0, 0, 0, .78); }
      .page { background: rgba(137, 96, 158, .17); margin: 2rem 0; padding: 2rem; position: relative; }
      .page::before { content: "<div> ...Scope"; color: rgba(0, 0, 0, .54); position: absolute; top: 0; left: 0; }
      .page::after { content: "</div>"; color: rgba(0, 0, 0, .54); position: absolute; bottom: 0; left: 0; }
      .purple { background: rgba(137, 96, 158, .17); }
      .green { background: lime; }
      .yellow { background: yellow; }


      /* Trello (default tyles) */
      .wrapper { display: flex; }
      .list-wrapper { flex: 1; margin: 10px; }
      .list { background: #e2e4e6; position: relative; padding: 0 10px 3px; }
      .icon { display: block; position: absolute; top: 0; right: 0; width: 33px; height: 38px; background: lime; text-decoration: none; font-size: 2em; line-height: 1.3; color: darkgreen; }
      .card { display: block; height: 50px; background: white; border-radius: 3px; border: 1px solid #ccc; padding: .5em; margin: 0 0 .5em; }

      /* List Popup */
      .list-popup { display: block; width: 350px; max-height: 800px; background: yellow; border-radius: 3px; border: 1px solid #ccc; padding: 1em; }
      .list-popup p { padding: 0 0 1rem; }
      .list-popup p span::after { content: "<div class='list-wrapper'>"; }
      .list-layouts ul { list-style: none; }

      .list-normal {  }
      .list-normal .list {  }

      .list-color {  }
      .list-color .list *  { background: skyblue; }

      .list-bold {  }
      .list-bold .list * { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Description -->
    <aside>
    <h1>Dynamic popup menu that adds class to lists parent when radio button is selected // removes classes when unselected</h1>
    <ul>
      <li>I'm trying to make the <span class="yellow">"List Popup"</span> popup directly under each <span class="green">"Green Gear"</span> icon when clicked on/ hidden when clicked off (css classes).</li>
      <li>Whenever a radio button is selected from the popup, I need it to add a class directly into the corresponding list's parent div, while not effecting any of the other lists.</li>
      <li>The trick (for me) is making all of this happen dynamically with 1 popup menu that sits outside of each <span class="purple">lists divs scope</span>.</li>
    </ul>
    </aside>



    <!-- Lists -->
    <div class="page">
    <div class="wrapper">

      <div class="list-wrapper">
        <div class="list">
          <h2>List (1)</h2>
          <a href="javascript:void(0);" class="icon">⚙</a>

          <div class="card">Woohoo! Woohoo! Woohoo! </div>
          <div class="card">Woohoo! Woohoo! Woohoo! </div>
          <div class="card">Woohoo! Woohoo! Woohoo! </div>
        </div>
      </div>

      <div class="list-wrapper">
        <div class="list">
          <h2>List (2)</h2>
          <a href="javascript:void(0);" class="icon">⚙</a>

          <div class="card">Woohoo! Woohoo! Woohoo! </div>
          <div class="card">Woohoo! Woohoo! Woohoo! </div>
          <div class="card">Woohoo! Woohoo! Woohoo! </div>
        </div>
      </div>

      <div class="list-wrapper">
        <div class="list">
          <h2>List (3)</h2>
          <a href="javascript:void(0);" class="icon">⚙</a>

          <div class="card">Woohoo! Woohoo! Woohoo! </div>
          <div class="card">Woohoo! Woohoo! Woohoo! </div>
          <div class="card">Woohoo! Woohoo! Woohoo! </div>
        </div>
      </div>

    </div>
    </div>

    <!-- List Layout popup -->
    <div class="page">
    <div id="listPopup" class="list-popup">
      <div>
        <h3>List Popup</h3>
        <p>These radio buttons should add a special class to the individual <span></span> when clicked on and removed when clicked off!</p>
      </div>

      <form class="list-layouts">
        <ul>
          <li>
            <input type="radio" name="listLayout" id="listNormal">
            <label for="listNormal">Normal</label>
          </li>
          <li>
            <input type="radio" name="listLayout" id="listColor">
            <label for="listColor">Bold</label>
          </li>
          <li>
            <input type="radio" name="listLayout" id="listBold">
            <label for="listBold">Italic</label>
          </li>
        </ul>
      </form>

    </div>
    </div>

Answer 1

因此，首先我们将使用以下代码将该类添加到列表父级的列表包装器中:

$('.icon').on('click', function () {
  if(!$('#listPopup').hasClass("open")){
      $('#listPopup').toggleClass("open");
  }
  $(this).parents('.list-wrapper').siblings().removeClass('blue');
  if(!$(this).parents('.list-wrapper').hasClass("blue")){
      $(this).parents('.list-wrapper').toggleClass("blue");
  }
});

然后我们需要为 radio 创建一个 onchange 函数来找到这个类并将新类添加到那个列表中。

$('.list-layouts input').on('change', function () {
  var newClass = $(this).attr("id");
  // Remove the following statement if you want your classes to stack up
  $('.blue').removeClass("listNormal listColor listBold");
  $('.blue').addClass(newClass);
});

这是整个过程的工作 fiddle Fiddle