Question

我有3个带有ID的img元素。单击元素时，我会像这样更改img src

$("#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");
    }
});

这段代码似乎非常重复，我想知道是否有一种方法可以像使用switch语句那样在单个.on click function中执行此操作。

如何将其简化为一个语句？

Answer 1

考虑以下代码：

$(function() {
  $(".svg").on("click", function() {
    var x = $(this);
    var non = "images/" + x.attr("id") + ".svg";
    var sel = "images/" + x.attr("id") + "_selected.svg";

    if (x.attr("src").indexOf("_") < 0) {
      x.attr("src", sel).toggleClass("selected");
      console.log(sel);
    } else {
      x.attr("src", non).toggleClass("selected");
      console.log(non);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img id="employee" src="images/employee.svg" class="svg image" />
  <img id="team" src="images/team.svg" class="svg image" />
  <img id="product" src="images/employee.svg" class="svg image" />
</div>

我们可以提取被单击元素的SRC，并根据特定条件执行特定操作。这适用于所有带有类选择器svg的元素。

希望有帮助。

Answer 2

如果您可以接受收藏夹。

HTML：

<div>
  <img id="employee" src="images/employee.svg" class="svg" />
  <img id="team" src="images/team.svg" class="svg" />
  <img id="product" src="images/product.svg" class="svg" />
</div>

JS：

$(function() {

  var images = {
    employee :  ['images/employee.svg', 'images/employee_selected.svg'],
    team :      ['images/team.svg', 'images/team_selected.svg'],
    product :   ['images/product.svg', 'images/product_selected.svg']
  };

  $(".svg").on("click", function(e) {
    e.target.setAttribute("src", ( e.target.getAttribute("src") === images[e.target.id][0] ) ? images[e.target.id][1] : images[e.target.id][0]);
  });
});

https://jsfiddle.net/uo7rhnbf/2/

Answer 3

从我这边来看，情况更高级，但也更灵活。

如何调用？

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

此外，您还可以配置事件和关键字。

实施：

Vanilla JS

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

  elems.forEach(elem => elem.addEventListener(event, (e) => {
    e.preventDefault();

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

    target.src = target.src.replace(matcher, (match, filenameOrPostfix, ext) => {
      return filenameOrPostfix === keyword ? 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}`;
        }));
      })
    });
  }
});

简化针对不同选择器的重复onlick事件

3 个答案: