Question

有一个复选框列表，可以更改容器li点击。这是一个例子，其余的是相同的（除了一些id和类，这里像#lips一样动态变化）

<li class="lifilter">
  <input type="checkbox" class="filtercheck" id="lips" checked="checked">
  <label for="Lips..." class="lips">
    <a href="lips">Lips</a>
  </label>
</li>

单击，.filtercheck获取.checkchecked类（如果有帮助）

还有一个链接列表

<div class="collectionurls"> 
  <a class="colurls colurl1" href="/collections/lips"></a>     
  <a class="colurls colurl2" href="/collections/face-lips"></a>     
  <a class="colurls colurl3" href="/collections/face-cheeks"></a>
</div>

我正在尝试比较复选框ID，当.lifilter被点击到该网址列表时，选择一个包含所有已检查ID的内容，将其添加到当前域，并在那里重定向页面。

例如：假设已经检查过#face，网站访问者点击了#lips。脚本检查.colurls面部和嘴唇。在我们的例子中，查找.colurl2，获取其href，添加到curdomain，并将页面重定向到domain.com/collections/face-leeps

有一个非常长的脚本形成这些id和类，但我真的卡在这里。

$(document).ready(function(){
var curdomain = document.domain;
//id's and classes forming code  
  $('.lifilter').click(function(){
          //compare ids to hrefs
  var addurl = // that class attr('href')
  var curdomain = curdomain + addurl;
  window.location = curdomain;
  });
});

我对js很新，并且不知道从哪里开始。并且很可能是语法错误，我正在组合变量。

帮助一个noob out plz

Answer 1

从我收集的内容中，您需要浏览页面上已选中的复选框并将它们连接在一起。最简单的方法可能是map。您提到已选中的复选框获取类checkchecked，因此：

var url = '/collections/' + $('.checkchecked').map(function (index, element) {
    return this.id;
}).join('-');

但是，URL中项目的顺序取决于文档中的顺序。例如，如果lips复选框位于文档顺序中的face复选框之前，则url将为'/collections/face-lips'，但如果相反，则为'/collections/lips-face'。map 1}}。

如果需要定义订单，请对var parts = $('.checkchecked').map(function (index, element) { return this.id; }).sort(); // This will sort them alphabetically var url = '/collections/' + parts.join('-');返回的数组进行排序：

var order = [ 'face', 'cheeks', 'lips' ];
var parts = $('.checkchecked').map(function (index, element) {
    return this.id;
}).sort(function (a, b) {
    return order.indexOf(a) - order.indexOf(b);
}); // This will sort by separate "order"

var url = '/collections/' + parts.join('-');

如果您有预设订单，请将该订单存储在单独的数组中：

{{1}}

Answer 2

看起来像是一种奇怪的导航方式，但我会这样做：

使用所有选中的复选框和jQuery attribute contains selectors

Array.map()

将这些选择器加入并应用生成的multiple attribute selector
检查您获得的结果数量。一旦缩小到一个结果，就有足够的信息来重定向。

下面有一个正在运行的代码段。它实际上并没有重定向，但会显示重定向位置或可能结果的数量。

＆＃13;

$(".filtercheck").on("click", function() {
  
  //build an array of jQuery contains selectors
  var selected = $(".filtercheck:checked").get().map(function(item) {
    return '[href*="' + item.id + '"]';
  });
  
  //join the selectors into a continuous string
  var selector = selected.join('');
  
  //run the jQuery selectors
  var result = $(".collectionurls " + selector);
  
  //if there is one result you can successfully navigate
  if (result.length === 1) {
    var href = result.attr("href");
    $("#result").val(href);
    //window.location = href; //uncomment to redirect
  }
  else {
    $("#result").val(result.length + " results");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="lifilter">
  <input type="checkbox" class="filtercheck" id="face" checked>
  <label for="face" class="face">
    Face
  </label>
</li>
<li class="lifilter">
  <input type="checkbox" class="filtercheck" id="lips">
  <label for="lips" class="lips">
    Lips
  </label>
</li>
<li class="lifilter">
  <input type="checkbox" class="filtercheck" id="cheeks">
  <label for="cheeks" class="cheeks">
    Cheeks
  </label>
</li>
</ul>
<div class="collectionurls"> 
  <a class="colurls colurl1" href="/collections/lips"></a>     
  <a class="colurls colurl2" href="/collections/face-lips"></a>     
  <a class="colurls colurl3" href="/collections/face-cheeks"></a>
</div>
<input id="result" />

＆＃13;

点击后，比较所选复选框的ID以列出href

2 个答案: