Question

我需要修改自定义的jQuery脚本。我有一个自定义jQuery脚本，它执行以下操作：它将标准HTML无序列表转换为＆lt; select＆gt;落下它将列表项转换为可点击的＆lt; options＆gt; ＆lt; select＆gt;隐藏在桌面上，仅在移动设备上显示所有这些都很棒，这里有一个截图：一切都运行良好，但是我需要在每个＆lt;选项＆gt;中添加一个额外的属性。注意每个HTML列表项的具体方式（data-filter =＆＃34; .term-x＆＃34;）我还需要将此添加到每个＆lt;选项＆gt;在＆lt; select＆gt;中落下这是在脚本运行并完成它之后页面上最终HTML输出的样子：＆lt; div id =＆＃34; horizontal_nav＆＃34;＆gt; ＆lt; ul class =＆＃34;子菜单＆＃34;＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34; http：//localhost.local/site/horizontal-nav/" data-filter =＆＃34; .term-3＆＃34;＆gt;＆lt; span＆gt;＆lt; strong＆gt;水平导航＆lt; / strong＆gt;＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34; http：//localhost.local/site/full-width/" data-filter =＆＃34; .term-4＆＃34;＆gt;＆lt; span＆gt;＆lt; strong＆gt;完整宽度＆lt; / strong＆gt;＆lt; / span＆gt;＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a href =＆＃34; http：//localhost.local/site/blog/"数据过滤器=＆＃34; .term-3＆＃34;＆GT;＆LT;跨度＆GT;＆LT;强＆GT;博客＆LT; /强＆GT;＆LT; /跨度＆GT;＆LT; / A＆GT;＆LT; /锂＆GT; ＆lt; li＆gt;＆lt; a href =＆＃34; http：//localhost.local/site/cart/"数据过滤器=＆＃34; .term-4＆＃34;＆GT;＆LT;跨度＆GT;＆LT;强＆GT;购物车和LT; /强＆GT;＆LT; /跨度＆GT;＆LT; / A＆GT;＆LT; /锂＆GT; ＆lt; li＆gt;＆lt; a href =＆＃34; http：//localhost.local/site/checkout/"数据过滤器=＆＃34; .term-5＆＃34;＆GT;＆LT;跨度＆GT;＆LT;强＆GT;结帐＆LT; /强＆GT;＆LT; /跨度＆GT;＆LT; / A＆GT;＆LT; /锂＆GT; ＆lt; li＆gt;＆lt; a href =＆＃34; http：//localhost.local/site/features/"数据过滤器=＆＃34; .term-5＆＃34;＆GT;＆LT;跨度＆GT;＆LT;强＆GT;功能与LT; /强＆GT;＆LT; /跨度＆GT;＆LT; / A＆GT;＆LT; /锂＆GT; ＆LT; / UL＆GT; ＆LT;选择＆GT; ＆lt;选择选项=＆＃34;选择＆＃34;值=＆＃34;＆＃34;＆gt;本节更多内容...＆lt; / option＆gt; ＆lt; option value =＆＃34; http：//localhost.local/site/horizontal-nav/"＆gt; Horizontal Nav＆lt; / option＆gt; ＆lt; option value =＆＃34; http：//localhost.local/site/full-width/"＆gt; Full Width＆lt; / option＆gt; ＆lt; option value =＆＃34; http：//localhost.local/site/blog/"＆gt; Blog＆lt; / option＆gt; ＆lt; option value =＆＃34; http：//localhost.local/site/cart/"＆gt; Cart＆lt; / option＆gt; ＆lt; option value =＆＃34; http：//localhost.local/site/checkout/"＆gt; Checkout＆lt; / option＆gt; ＆lt; option value =＆＃34; http：//localhost.local/site/features/"＆gt;功能＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; 这是创建＆lt; select＆gt;的jQuery。并需要上述修改 jQuery（document）.ready（function（）{ jQuery（＆＃34;＆lt; select />").appendTo("#horizontal_nav"）; jQuery（＆＃34;＆lt; option /＆gt;＆＃34;，{ ＆＃34;选择＆＃34;：＆＃34;选择＆＃34;，＆＃34;价值＆＃34;：＆＃34;＆＃34;，＆＃34; text＆＃34;：php_data.mobile_sub_menu_text }）。appendTo（＆＃34; #horizontal_nav select＆＃34;）; jQuery（＆＃34; #horizontal_nav a＆＃34;）。each（function（）{ var el = jQuery（this）; jQuery（＆＃34;＆lt; option /＆gt;＆＃34;，{ ＆＃34;价值＆＃34;：el.attr（＆＃34; href＆＃34;），＆＃34; text＆＃34;：el.text（） }）。appendTo（＆＃34; #horizontal_nav select＆＃34;） }）; jQuery（＆＃34; #horizontal_nav select＆＃34;）。change（function（）{ window.location = jQuery（this）.find（＆＃34; option：selected＆＃34;）。val（） }） }; }）;

Answer 1

jQuery(document).ready(function() {

  jQuery("<select />").appendTo("#horizontal_nav");
  jQuery("<option />", {
    "selected": "selected",
    "value": ""
  }).appendTo("#horizontal_nav select");
  jQuery("#horizontal_nav a").each(function() {
    var el = jQuery(this);
    jQuery("<option />", {
      "value": el.attr("href"),
      "text": el.text(),
      "data-filter": el.attr('data-filter')//add it here
    }).appendTo("#horizontal_nav select")
  });
  jQuery("#horizontal_nav select").change(function() {
    window.location = jQuery(this).find("option:selected").val()
  })


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="horizontal_nav">
  <ul class="sub-menu">
    <li><a href="http://localhost.local/site/horizontal-nav/" data-filter=".term-3"><span><strong>Horizontal Nav</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/full-width/" data-filter=".term-4"><span><strong>Full Width</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/blog/" data-filter=".term-3"><span><strong>Blog</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/cart/" data-filter=".term-4"><span><strong>Cart</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/checkout/" data-filter=".term-5"><span><strong>Checkout</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/features/" data-filter=".term-5"><span><strong>Features</strong></span></a>
    </li>
  </ul>
</div>

添加.attr()名称data-filter，然后附加ul的数据过滤器

自定义jQuery - 将数据过滤器添加到<select> <option>

1 个答案: