Question

我有一个带有下拉列表的HTML页面，代表具体时间如下：

  <div class="dropdown form-group col-xs-5" style="padding-right: 20px;">
        <label for="time">Temps</label>
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
   5 sec<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="timeChoice">
            <li><a href="#" id="act1">5 sec</a></li>
            <li><a href="#" id="act2">10 sec</a></li>
            <li><a href="#" id="act3"> 15 sec</a></li>
            <li><a href="#" id="act4">30 sec</a></li>
        </ul>
 </div>

我想创建一个识别时间并返回此时分配的值的函数。例如，当用户点击变量sec5中的timeOption = 5000;函数时我使用javascript和jQuery：

$('#act1').click(function(e) {
    var timeOption = 5000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality
});
$('#act2').click(function(e) {
    var timeOption = 10000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality
});
$('#act3').click(function(e) {
    var timeOption = 15000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality
});
$('#act4').click(function(e) {
    var timeOption = 30000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality
});

如何添加具有特定值的return语句？

Answer 1

您要求返回语句，但这不是正确的方法，因为事件回调不是从您可以处理函数的返回值的上下文中调用的（返回值最终在jQuery函数中获取并获取处理那里）。您希望使timeOption值对某些其他函数可见，您可以通过各种方式执行此操作。在这种情况下，我建议将值传递给函数：

$('#act1').click(function(e) {
    var timeOption = 5000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality

    handleTimeOption(timeOption);
});

$('#act2').click(function(e) {
    var timeOption = 10000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality

    handleTimeOption(timeOption);
});    
$('#act3').click(function(e) {
    var timeOption = 15000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality

    handleTimeOption(timeOption);
});
$('#act4').click(function(e) {
    var timeOption = 30000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality

    handleTimeOption(timeOption);
});

function handleTimeOption(timeOption) {
    // Here goes whatever code you want to run when a time option has been selectedl
}

Answer 2

稍微改变你的代码。将数据属性添加到每个锚标记，然后编写单击处理程序

$('#timeChoice').on("click", "a", function(e) {
    var timeOption = e.target.getAttribute('data-time')*1000;
    alert(timeOption);
    e.preventDefault();// prevent the default anchor functionality
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown form-group col-xs-5" style="padding-right: 20px;">
        <label for="time">Temps</label>
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
   5 sec<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="timeChoice">
            <li><a href="#" id="act1" data-time="5">5 sec</a></li>
            <li><a href="#" id="act2"  data-time="10">10 sec</a></li>
            <li><a href="#" id="act3"  data-time="15"> 15 sec</a></li>
            <li><a href="#" id="act4"  data-time="30">30 sec</a></li>
        </ul>
 </div>

如何从选定的下拉列表创建变量并使用javascript返回它

2 个答案: