Question

我的插件有问题，让我给你看一下HTML代码：

{% verbatim %}
  <ul class="hidden-xs">
    {{#each jobs_by_locations}}
      {{#if @last}}
        <li><a href="" class="job-location" data-location-id="{{this.name}}">{{../../link_to_others_title}}</a></li>
      {{else}}
        <li><a href="" class="job-location {{#if @first}}active{{/if}}" data-location-id="{{this.name}}">{{this.name}}</a></li>
      {{/if}}
      {{/each}}
  </ul>

  <select class="visible-xs">
    {{#each jobs_by_locations}}
      {{#if @last}}
        <option data-location-id="{{this.name}}" class="job-location">{{../../link_to_others_title}}</option>
      {{else}}
        <option data-location-id="{{this.name}}" class="job-location {{#if @first}}active{{/if}}">{{this.name}}</option>
      {{/if}}
      {{/each}}
  </select>
{% endverbatim %}

所以，我有一个用于桌面屏幕的ul和一个用于移动的选择。

在我的js文件中，我遇到了问题：

  $(document).on("click", ".job-location", function(event) {
    var $this = $(this);
    var locationId = $this.data("location-id");
    var pluginHtmlId = $this.closest(".jobs-list-plugins").attr("id");
    ....

问题是我的locationId未定义。

实际上，当bootstrap-select转换我的select时，没有任何data-location-id。如果我使用id而不是data属性，也会发生同样的事情。

下拉菜单在bootstrap-select：

之后包含此内容

<a tabindex="0" class="job-location" style="" data-tokens="null"><span class="text">London</span><span class="glyphicon glyphicon-ok check-mark"></span></a>

这是bootstrap-select声明：

$('select').selectpicker({hideDisabled: true});

有人对此有所了解吗？

Answer 1

好的，bootstrap-select只读取一些特定的数据属性进行转换。要实现您的目标，您可以使用data-content。

将您option更改为：

<select class="visible-xs">
    {{#each jobs_by_locations}}
      {{#if @last}}
        <option data-content="<span data-location-id='{{this.name}}'>{{../../link_to_others_title}}</span>" class="job-location">{{../../link_to_others_title}}</option>
      {{else}}
        <option data-content="<span data-location-id='{{this.name}}'>{{this.name}}</span>" class="job-location {{#if @first}}active{{/if}}">{{this.name}}</option>
      {{/if}}
    {{/each}}
</select>

要获得data-location-id你需要做的事情，比如：

$(document).on("click", ".job-location", function(event) {
    var $this = $(this);
    var locationId = $this.children( "span" ).first().attr("data-location-id");
    (...)

Bootstrap-select不会识别id

1 个答案: