小书签 - 从下拉列表中强制 select

Question

我有一个网页，我想使用小书签实现自动化。

它有一个下拉菜单，允许用户 select 时间范围类型：分钟、小时、天。我想 select 小书签代码中的天数，但我不知道如何在 knockout 中处理这些 data-bind 属性：

HTML 看起来像这样：

<span class="btn-group">
    <button class="dropdown-toggle" tabindex="-1" data-bind="disable: settings.disabled">
        <span data-bind="text: settings.offsetUnits">Days</span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" data-bind="foreach: settings.offsetUnitsChoices">
        <li><a tabindex="-1" href="#" data-bind="text: $data, click: $parent.selectUnits">Minutes</a></li>

        <li><a tabindex="-1" href="#" data-bind="text: $data, click: $parent.selectUnits">Hours</a></li>

        <li><a tabindex="-1" href="#" data-bind="text: $data, click: $parent.selectUnits">Days</a></li>
    </ul>
</span>

Answer 1

如果您对列表中您想要 select 的元素触发 jquery 单击事件，它将触发 $parent.selectUnits 函数，该函数应该 select元素。请参阅下面的示例。

$('ul > li:nth-child(6) > a').click()

var pageViewModel = {
  selectUnits: function(itemClicked) {
   alert(`You selected ${itemClicked}`);
    pageViewModel.settings.offsetUnits(itemClicked);
  },
 settings: {
   offsetUnits: ko.observable(0),
    offsetUnitsChoices: [5, 15, 30, 45]
  }
};



ko.applyBindings(pageViewModel);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>



<span class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span data-bind="text: `${settings.offsetUnits()} Units`"></span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" data-bind="foreach: settings.offsetUnitsChoices">
        <li><a href="#" data-bind="text: `${$data} Minutes`, click: $parent.selectUnits"></a></li>
        <li><a href="#" data-bind="text: `${$data} Hours`, click: $parent.selectUnits"></a></li>
        <li><a href="#" data-bind="text: `${$data} Days`, click: $parent.selectUnits"></a></li>
    </ul>
</span>


<a href="javascript:$('ul > li:nth-child(6) > a').click()">My bookmark to select the 6th item in the dropdown</a>

小书签 - 从下拉列表中强制 select

Bookmarklet - force select from dropdown

javascript

jquery

bookmarklet

knockout.js