合并来自 2 个 jQuery 片段的功能
Posted
技术标签:
【中文标题】合并来自 2 个 jQuery 片段的功能【英文标题】:Merge functionality from 2 jQuery snippets 【发布时间】:2021-12-09 18:08:20 【问题描述】:我有 2 个执行相关操作的 jQuery sn-ps。
第一个是这个。
$(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.
);
这段代码的效果是把一个被点击元素的'sliced'类,找到另一个具有匹配类的元素并点击它。
第二个 jQuery sn-p 是这个。
$(".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();
);
这个 sn-p 作用于 Wordpress 插件 FacetWP 的 javascript 引擎,实际上它具有清除所有方面然后从单个方面进行预定义选择的效果。在这种情况下,它会从 facet 'chapter' 中选择选项 'welcome'。
所以我需要在第二个 sn-p 中添加相同的动态质量。它可能看起来像这样......
$(".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 类
【问题讨论】:
真正的问题是什么?编写一个函数,返回以给定前缀开头的(第一个)类。Element.classList
问题是我不知道该怎么做。你能帮忙吗?
它确实已经在你的问题中了 o.O 虽然有(恕我直言)更好的方法(见我的第二条评论)
简单 - this.classList
,但请记住它是只读属性
【参考方案1】:
编辑:包括第二部分!
$(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>
【讨论】:
非常感谢,但我想你一定是误解了这个问题。它仅与第二个 sn-p 相关,其中显示第一个 sn-p 只是为了说明我正在寻找的解决方案。我只是想编辑第二个 sn-p。我说得通吗? 我已经编辑了我的答案,包括第二部分。 用底部的“结果”部分更新了我的问题。 我不确定我能提供的帮助比我做的更多,因为我没有全貌,但如果你觉得这个答案有帮助,你可以投票和/或选择它如果您认为是最佳答案(绿色勾号)。 当然可以。我明白。有没有办法与您分享更多信息?我们可以在 *** 之外进行交流吗?以上是关于合并来自 2 个 jQuery 片段的功能的主要内容,如果未能解决你的问题,请参考以下文章