jQuery根据其ID号选择div [英] Jquery selecting divs based on their id number

问题描述

经过大量研究，我发现JQuery却找不到我的问题的答案，因为我不知道如何很好地表达它.

I am discovering JQuery and can't find an answer to my question, after a lot of research, because I don't know how to express it well.

我的页面上有2个标尺+ 2个指南以及2个用于显示或隐藏它们的按钮. 我写了一些可行的方法，但是我想通过缩短代码来优化代码.

I have 2 rulers + 2 guides on my page and 2 buttons to show or hide them. I wrote something that works but I would like to optimize the code by making it shorter.

这里是:

$('#ruler-bg1, #ruler-bg2').hide();

$('#ruler1').click(function() {
  $('#ruler-bg1').slideToggle(100);
  $('#guide1').toggleClass('guide-on');
});

$('#ruler2').click(function() {
  $('#ruler-bg2').slideToggle(100);
  $('#guide2').toggleClass('guide-on');
});

我不知道如何对这两个功能进行分组，因此单击#ruler+number会显示#ruler-bg+same_number和#guide+same_number.

What I can't figure out is how to group the 2 functions so a click on #ruler+number shows #ruler-bg+same_number and #guide+same_number.

推荐答案

应该执行以下操作:

$('#ruler1, #ruler2').click(function(){
    var num = this.id.substr(6);

    $('#ruler-bg' + num).slideToggle(100);
    $('#guide' + num).toggleClass('guide-on');
});

如果单击的元素与所作用的元素之间存在某种结构上的关系，那可能会更好.

It would probably be nicer if there was some structural relationship between the element clicked and the elements acted upon...

这篇关于jQuery根据其ID号选择div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！