合并來自2個jQuery片段的功能

我有 2 個執行相關操作的 jQuery 片段。

第一個是這個。

$(document).on('click', "[class*='fs-']", function(e) {
    var c = $(this).attr('class');  // I read the class of the element 
    c = c.slice(c.indexOf('fs-')) // I delete any classes prior to the desired one 
    .split(' ')[0]              // I delete any classes following the desired one
    .slice('fs-'.length);     // I delete the "fs" from the class 
    $("[data-value="  c  "]").click();  // If the element exists, then it simulates a click on it. 
});

這段代碼的作用是獲取被點擊元素的“切片”類并找到另一個具有匹配類的元素并點擊它。

第二個 jQuery 片段是這樣的。

$(".show-welcome").click(function () {
        $.each(FWP.facets, function(name, val) {FWP.facets[name] = [];}); /* clear all */
        FWP.facets['chapter'] = ['welcome']; /* make selection */
        FWP.is_reset = true; // don't parse facets
        FWP.refresh();
});

此代碼段作用于 Wordpress 插件 FacetWP 的 javascript 引擎，實際上它具有清除所有方面的效果，然后從單個方面進行預定義選擇。在這種情況下，它從構面“章節”中選擇選項“歡迎”。

所以我需要為第二個片段添加相同型別的動態質量。它可能看起來像這樣......

$(".show-XXX").click(function () {
        $.each(FWP.facets, function(name, val) {FWP.facets[name] = [];}); /* clear all */
        FWP.facets['chapter'] = ["the clicked element less the 'show-' part"]; /* make selection */
        FWP.is_reset = true; // don't parse facets
        FWP.refresh();
});

誰能告訴我如何實作這一目標？非常感謝。

結果

因此，在嘗試由@Reflective 提供的代碼時，我發現 FacetWP 對點擊有兩次反應。這是我必須描述它的唯一方式。請參閱所附圖片。

我的可點擊元素有類 .chapter .show-designs-four-a

uj5u.com熱心網友回復：

編輯：包括第二部分！

$(function(){

  $(document).on('click', "[class*='fs-']", function(e) {
    // getting all classes and converting them to an array
    Array.from($(this).prop('classList'))
      // filtering non 'fs-' classes 
      .filter(x => x.match(/^fs-/))
      // stripping leading `fs-`
      .map( x => { 
        const [a,b] = x.match(/^fs-(\w )/i); 
        return b; 
      // clicking all elements having data atribute matching the fs- classes from the collection  
      }).forEach( x => {
        console.log(x); 
        $("[data-value='${x}']").click(); 
      });
  });

  var FWP = {
    facets: {chapter:[]}, 
    is_reset: false,
    refresh: function() {}
  };
  
  $(".chapter").click(function () {
    /* clear all */
    $.each(FWP.facets, function(name, val) {FWP.facets[name] = [];});
    var [chapter] = Array.from($(this).prop('classList'))
      // filtering non 'show-' classes 
      .filter(x => x.match(/^show-/))
      // stripping leading `show-`
      .map( x => { 
        const [a,b] = x.match(/^show-(\w )/i); 
        return b; 
      });
    /* make selection */
    FWP.facets['chapter'] = [chapter]; 
    FWP.is_reset = true; // don't parse facets
    FWP.refresh();
    console.log(FWP);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="element" class="fs-one fs-two fs-three other1 other2">Click here</div>

<hr/>
Second part (click some of the entries)
<hr/>

<div class="chapter show-book">Book</div>
<div class="chapter show-window">Window</div>
<div class="chapter show-chair">Chair</div>

標籤：查询 WordPress的 切面

上一篇：jQuery輸入添加

下一篇：貓頭鷹旋轉木馬導航效果