Question

我有一个网页，我想用书签自动化。

它有一个下拉菜单，允许用户选择时间范围类型：分钟，小时，天。我想在bookmarklet代码中选择Days，但我不知道如何在淘汰赛中使用这些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

如果在列表中的元素上触发jquery click事件，则会触发$ parent.selectUnits函数，该函数应选择该元素。请参阅下面的示例。

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Bookmarklet - 强制从下拉列表中选择

1 个答案: