javascript - 将效果从 select 复制到 div

Question

目前我有这个 html:

  <div class="limit">
      <select onchange="location = this.value;">
       <option value="http://example.net/mycategory?limit=24" selected="selected">24</option>
        <option value="http://example.net/mycategory?limit=48">48</option>
        <option value="http://example.net/mycategory?limit=72">72</option>
        <option value="http://example.net/mycategory?limit=96">96</option>
        <option value="http://example.net/mycategory?limit=120">120</option>
        <option value="http://example.net/mycategory?limit=9999">ALL</option>
       </select>
    </div>

在我的 .js 文件中使用了这个:

if ($(".limit select").length) {
    $(".limit select").get(0).onchange = null;
    $(".limit select").change(function () {
        $("#filterpro_limit").val(gUV($(this).val(), "limit"));
        iF()
    });
}

我实际上想要的是在下拉列表之外的一行中显示选择的选项，所以我的想法是删除上面的 html 并使用这个:

 <div class="limit">
       <div data-value="http://example.net/mycategory?limit=24">24</div>
       <div data-value="http://example.net/mycategory?limit=48">48</div>
       <div data-value="http://example.net/mycategory?limit=72">72</div>
       <div data-value="http://example.net/mycategory?limit=96">96</div>
       <div data-value="http://example.net/mycategory?limit=120">120</div>
        <div data-value="http://example.net/mycategory?limit=9999">ALL</div>
     </div>

在 js 中使用这样的东西:

 if ($(".limit div").length) {
        $(".limit div").get(0).onclick = null;
        $(".limit div").click(function () {
            $("#filterpro_limit").val(gUV($(this).val(), "limit"));
            iF()
        });
    }

但不知何故我无法使 js 正常工作以产生类似的效果。任何帮助将不胜感激!

Answer 1

在您当前的代码中，应该纠正一些错误:

• 首先这个选择器$(".limit div")这里是错误的，因为它会得到所有 div s 在具有类 limit 的元素内所以你需要把它改成$("div.limit")为了获得想要的 div。

• 您正在使用 $(this).val()在没有 .val() 的 div 元素上因为它不是 input或 select ，您需要将其更改为 $(this).attr("data-value")以及正确的选择器。

• 并谈到在您的 .limit 中获取 div 选项的正确选择器div 你需要使用 $("div.limit div")而且不需要使用 .get(0)使用此选择器。

所以你的代码需要修改如下:

if ($("div.limit").length) {
    $("div.limit div").onclick = null;
    $("div.limit div").click(function() {
        $("#filterpro_limit").val(gUV($(this).attr("data-value"), "limit"));
        iF()
    });
}

注意:

请注意，您需要更改 .limit div 及其子样式以使其作为下拉列表工作。