Question

我有一个包含值列表的对话框。用户应该能够单击以选择多个<li>。然后，当他们点击按钮时，每个所选项目的文本都会添加到#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>

Answer 2

你的代码应该怎么做？

var nValue = $(this).val($(this).text());

应该只是：

var nValue = $(this).html();

从对话框存储变量并传递给其他div

2 个答案: