Javascript 简化不同选择器的重复onclick事件

我有3个ID为的

img

元素。当我单击元素时，我会像这样更改

imgsrc

$("#employee").on("click", function(){
    var x = $(this);

    var y = $(this).attr("src");

    if($(this).attr("src") == "images/employee.svg")
    {
            $(this).attr("src", "images/employee_selected.svg");
    }

    else
    {
            $(this).attr("src", "images/employee.svg");
    }
});

$("#team").on("click", function(){
    var x = $(this);

    var y = $(this).attr("src");

    if($(this).attr("src") == "images/team.svg")
    {
            $(this).attr("src", "images/team_selected.svg");
    }

    else
    {
            $(this).attr("src", "images/team.svg");
    }
});

$("#product").on("click", function(){
    var x = $(this);

    var y = $(this).attr("src");

    if($(this).attr("src") == "images/product.svg")
    {
            $(this).attr("src", "images/product_selected.svg");
    }

    else
    {
            $(this).attr("src", "images/product.svg");
    }
});

这段代码似乎非常重复，我想知道是否有一种方法可以在单个

中实现这一点

如何将其简化为一条语句？
考虑以下代码：


$（函数（）{
$（“.svg”）。在（“单击”，函数（）{
var x=$（此）；
var non=“images/”+x.attr（“id”）+“.svg”；
var sel=“images/”+x.attr（“id”）+“_selected.svg”；
if（x.attr（“src”）.indexOf（“”）<0）{
x、 属性（“src”，sel）.toggleClass（“选定”）；
控制台日志（sel）；
}否则{
x、 属性（“src”，非）.toggleClass（“选定”）；
控制台日志（非）；
}
});
});
考虑以下代码：


$（函数（）{
$（“.svg”）。在（“单击”，函数（）{
var x=$（此）；
var non=“images/”+x.attr（“id”）+“.svg”；
var sel=“images/”+x.attr（“id”）+“_selected.svg”；
if（x.attr（“src”）.indexOf（“”）<0）{
x、 属性（“src”，sel）.toggleClass（“选定”）；
控制台日志（sel）；
}否则{
x、 属性（“src”，非）.toggleClass（“选定”）；
控制台日志（非）；
}
});
});
以防您对收藏满意

HTML:

以防您对收藏满意

HTML:

从我的角度来看，这是一个更高级的场景，但也更灵活


如何调用？

toggleElementsOn({
  selectors: [ 'body', '.btn1' ],
  event: 'mouseover',
  keyword: '_add_something_to_image_src_path'
})

此外，如您所见，事件和关键字是可配置的


实施：

香草JS

函数切换元素（{选择器，事件='click'，关键字='u selected'}）{
/**
*根据传递的选择器获取元素
*@param{Array}args
*/
const getElements=args=>args.map（elem=>document.querySelector（elem））
常量元素=获取元素（选择器）
elem.forEach（elem=>elem.addEventListener（事件，（e）=>{
e、 预防默认值（）；
const target=e.target；
const matcher=new RegExp（`（${keyword}|[-a-zA-Z0-9]+）（\\.[a-z]{3}）$`，'g'）；
target.src=target.src.replace（matcher，（match，filename或postfix，ext）=>{
返回filenameOrPostfix==关键字？ext:`${filenameOrPostfix}${keyword}${ext}`；
});
}));
}

jQuery版本

$(document).ready(function () {
  function toggleElementsOn ({ selectors, event = 'click', keyword = '_selected' }) {
    /**
     * Get elements based on passed selectors
     * @param {Array<String>} args
     */
    const getElements = args => $.map(args, elem => $(elem))
    const elems = getElements(selectors)

    $.each(elems, (key, elem) => {
      $(elem).on(event, (e) => {
        e.preventDefault();

        const target = $(this);
        const matcher = new RegExp(`(${keyword}|[-a-zA-Z0-9]+)(\\.[a-z]{3})$`, 'g');

        target.attr('src', target.attr('src').replace(matcher, (match, filenameOrPostfix, ext) => {
          return filenameOrPostfix === keyword ? ext : `${filenameOrPostfix}${keyword}${ext}`;
        }));
      })
    });
  }
});

$（文档）.ready（函数（）{
函数toggleElementsOn（{选择器，事件='click'，关键字='u selected'}）{
/**
*根据传递的选择器获取元素
*@param{Array}args
*/
常量getElements=args=>$.map（args，elem=>$（elem））
常量元素=获取元素（选择器）
$。每个（元素，（键，元素）=>{
$（elem）.on（event，（e）=>{
e、 预防默认值（）；
const target=$（此项）；
const matcher=new RegExp（`（${keyword}|[-a-zA-Z0-9]+）（\\.[a-z]{3}）$`，'g'）；
target.attr（'src'，target.attr（'src'）.replace（matcher，（match，filenameOrPostfix，ext）=>{
返回filenameOrPostfix==关键字？ext:`${filenameOrPostfix}${keyword}${ext}`；
}));
})
});
}
});
从我的角度来看，这是一个更高级的场景，但也更灵活


如何调用？

toggleElementsOn({
  selectors: [ 'body', '.btn1' ],
  event: 'mouseover',
  keyword: '_add_something_to_image_src_path'
})

此外，如您所见，事件和关键字是可配置的


实施：

香草JS

函数切换元素（{选择器，事件='click'，关键字='u selected'}）{
/**
*根据传递的选择器获取元素
*@param{Array}args
*/
const getElements=args=>args.map（elem=>document.querySelector（elem））
常量元素=获取元素（选择器）
elem.forEach（elem=>elem.addEventListener（事件，（e）=>{
e、 预防默认值（）；
const target=e.target；
const matcher=new RegExp（`（${keyword}|[-a-zA-Z0-9]+）（\\.[a-z]{3}）$`，'g'）；
target.src=target.src.replace（matcher，（match，filename或postfix，ext）=>{
返回filenameOrPostfix==关键字？ext:`${filenameOrPostfix}${keyword}${ext}`；
});
}));
}

jQuery版本

$(document).ready(function () {
  function toggleElementsOn ({ selectors, event = 'click', keyword = '_selected' }) {
    /**
     * Get elements based on passed selectors
     * @param {Array<String>} args
     */
    const getElements = args => $.map(args, elem => $(elem))
    const elems = getElements(selectors)

    $.each(elems, (key, elem) => {
      $(elem).on(event, (e) => {
        e.preventDefault();

        const target = $(this);
        const matcher = new RegExp(`(${keyword}|[-a-zA-Z0-9]+)(\\.[a-z]{3})$`, 'g');

        target.attr('src', target.attr('src').replace(matcher, (match, filenameOrPostfix, ext) => {
          return filenameOrPostfix === keyword ? ext : `${filenameOrPostfix}${keyword}${ext}`;
        }));
      })
    });
  }
});

$（文档）.ready（函数（）{
函数toggleElementsOn（{选择器，事件='click'，关键字='u selected'}）{
/**
*根据传递的选择器获取元素
*@param{Array}args
*/
常量getElements=args=>$.map（args，elem=>$（elem））
常量元素=获取元素（选择器）
$。每个（元素，（键，元素）=>{
$（elem）.on（event，（e）=>{
e、 预防默认值（）；
const target=$（此项）；
const matcher=new RegExp（`（${keyword}|[-a-zA-Z0-9]+）（\\.[a-z]{3}）$`，'g'）；
target.attr（'src'，target.attr（'src'）.replace（matcher，（match，filenameOrPostfix，ext）=>{
返回filenameOrPostfix==关键字？ext:`${filenameOrPostfix}${keyword}${ext}`；
}));
})
});
}
});
将所有选择器合并为一个选择器。所有3个之间的唯一区别是图像名称，它们很容易从
this
的
id
解析，欢迎使用堆栈溢出。您可以考虑给每个类名称并使用该选择器而不是ID选择器。更容易分组：
$（“.className”）。单击（函数（e）{}）例如。将所有选择器合并为一个选择器。所有3个之间的唯一区别是图像名称，它们很容易从
this
的
id
解析，欢迎使用堆栈溢出。您可以考虑给每个类名称并使用该选择器而不是ID选择器。更容易分组：
$（“.className”）。单击（函数（e）{}）例如。
$(document).ready(function () {
  function toggleElementsOn ({ selectors, event = 'click', keyword = '_selected' }) {
    /**
     * Get elements based on passed selectors
     * @param {Array<String>} args
     */
    const getElements = args => $.map(args, elem => $(elem))
    const elems = getElements(selectors)

    $.each(elems, (key, elem) => {
      $(elem).on(event, (e) => {
        e.preventDefault();

        const target = $(this);
        const matcher = new RegExp(`(${keyword}|[-a-zA-Z0-9]+)(\\.[a-z]{3})$`, 'g');

        target.attr('src', target.attr('src').replace(matcher, (match, filenameOrPostfix, ext) => {
          return filenameOrPostfix === keyword ? ext : `${filenameOrPostfix}${keyword}${ext}`;
        }));
      })
    });
  }
});