是否可以在列表项元素上有一个动作侦听器，并将其作为JavaScript中的参数传递？

dldeef67 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(79)

是否可以在HTML中为列表项设置一个动作侦听器，并在JavaScript中传递用户单击的内容？
Index.html:

<div class="dropdown">
<button class="btn d-flex align-items-center" type="button">
    <h3 class="fs-1 fw-bold">Set Limit</h3>
</button>
<ul class="dropdown-menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>

<script>
$(function() {

   // I want this to be able to get its value
   // depending on what the user clicked from the <li> tag
   var limit = 1;
});
</script>

我现在更新了代码
Index.html:

<select id="dropdown">
   <option value="A" data-number="1">option1</option>
   <option value="B" data-number="2">option2</option>
   <option value="C" data-number="3">option3</option>
   <option value="D" data-number="4">option4</option>
</select>

<script>
$('#dropdown').change(function(){
   var number = $(this).find('option:selected').attr('data-number');
});

$(function() {
   /* I am unsure now on how to get the number variable from above and put it here in my var limit */
   var limit = ;
});

</script>

JavaScript

来源：https://stackoverflow.com/questions/76106257/is-it-possible-to-have-an-action-listener-on-a-list-item-element-and-pass-it-as

2条答案

按热度按时间

q1qsirdb1#

我想这真的取决于你的数据流。在这里，我从change处理程序中的select元素中获取所选值，并将其作为参数传递给一个名为main的函数，该函数将其记录到控制台。
注意：我将值从data-number属性移到了value（否则值的意义是什么？）..？）

$('select').on('change', handleChange);

function handleChange() {
  const limit = $(this).val();
  main(limit);
}

function main(limit) {
  console.log(limit);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<select class="form-select">
  <option selected disabled>Select an option</option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
</select>

赞(0）回复(0）举报 2023-04-28

relj7zay2#

因为你已经在使用query了，我建议你使用on

<script>
    var currentLimit = 1;
    $(function() {
       $("li").on("click", function ()
       {
          currentLimit = parseInt(this.innerText);
       });
    });
</script>

赞(0）回复(0）举报 2023-04-28

我来回答

是否可以在列表项元素上有一个动作侦听器，并将其作为JavaScript中的参数传递？

2条答案

相关问题

热门标签

最新问答