jquery - 存储对话框中的变量并传递给其他 div

Question

我有一个包含值列表的对话框。用户应该能够单击选择多个 <li> s。然后，当他们单击按钮时，每个选定元素的文本都会添加到 #landing

<!-- this is the dialog box -->
<div class="fontBox">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>
<div id="Button">Insert Value</div>

<!-- Previous Page -->
<table>
  <tr>
    <td id="landing">This is where I want the value to go</td>
  </tr>
</table>

$('.fontBox ul li').on('click', function () {
   $(this).css('background', 'green');
   var nValue = $(this).val($(this).text());
   localStorage.setItem("nValue", nValue);

   if (nValue != null) {
       $('#landing').text(nValue);
   }
});

Answer 1

要使其发挥作用，需要更改许多内容。首先，您需要将按钮的单击与 <li> 的单击分开处理。 (我在这里推荐 <button> 标签，但这不是绝对必要的)。

.toggleClass(classStr)是在 jQuery 中添加和删除类的好方法，这就是您标记 <li> 所需的全部内容。 。然后，你可以得到所有.selected单击该按钮即可列出元素并连接其内部结构。

请参阅下面我的代码片段作为示例。请注意，我注释掉了您的 localStorage 行，因为它在片段中不起作用。请随意在您自己的代码中取消注释。另外，请注意，我从 JavaScript 代码中删除了样式并将其放入 CSS 中。最好像这样分开。如果您想了解更多关于我推荐此操作的原因，请查找“关注点分离”和/或仅在评论中提问，我将尽力在此处进一步解释。

var $liEls = $('.font-box ul li');
$liEls.on('click', function () {
  $(this).toggleClass('selected');
});

$('#insert-button').on('click', function() {
  var $selected = $liEls.filter('.selected');
  var nValue = '';
  $selected.each(function(idx, el) {
    nValue = nValue + $(el).text();
  });

  // Save to local storage (doesn't work in snippets)
  //localStorage.setItem("nValue", nValue);
  
  $('#landing').text(nValue);
});

.font-box ul {
  list-style: none;
  padding: 0px;
}

.font-box li {
  cursor: pointer;
}

.font-box li:hover {
  background: lightgray;
}

.font-box li.selected {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is the dialog box -->
<div class="font-box">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>
<button id="insert-button">Insert Values</button>

<!-- Previous Page -->
<table>
  <tr>
    <td id="landing">This is where I want the value to go</td>
  </tr>
</table>