选择单选按钮时向父项添加 class 的动态弹出菜单（如 Trello 的）

Question

我想创建一个动态弹出菜单，在选择单选按钮时将 class 添加到 "lists" 父级 // 在未选择时删除 classes (HTML下面的结构无法更改...只能更改 CSS 和 JS)

我正在尝试使 "List Popup" 弹出窗口直接在每个 "Green Gear" 图标下单击/在单击时隐藏（css classes）。
每当从弹出窗口中选择一个单选按钮时，我需要它直接将 class 添加到相应列表的父级 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

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

$('.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");
  }
});

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

$('.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

选择单选按钮时向父项添加 class 的动态弹出菜单（如 Trello 的）

Dynamic popup menu that adds class to parent when radio button is selected (like Trello's)

javascript

css

jquery

trello

我想创建一个动态弹出菜单，在选择单选按钮时将 class 添加到 "lists" 父级 // 在未选择时删除 classes (HTML下面的结构无法更改...只能更改 CSS 和 JS)