jQuery-使用类的最后一位找到多个关联的类? [英] jQuery - find multiple associated classes using the last digit of the class?

问题描述

我有以下HTML代码:

I have the following HTML code:

            <fieldset>
                <legend><span>Contact Details</span> <span class="edit1">Edit</span><span class="hide1">Hide</span></legend>
                <div>
                <!--content-->
                </div>
            </fieldset>


            <fieldset>
                <legend><span>Contact Details</span> <span class="edit2">Edit</span><span class="hide2">Hide</span></legend>
                <div>
                <!--content-->
                </div>
            </fieldset>  

类别为"hide1"和"hide2"的范围设置为在页面加载时不显示.

The spans with the class "hide1" and "hide2" are set to display:none on page load.

在这段代码中，使用jQuery，我正在尝试执行以下操作:

Within this code, using jQuery, I am trying to do the following:

• 如果单击edit1，则该跨度将被隐藏，并且与类"hide1"相关联的跨度将变为可见.
• 对于代码中的所有其他范围，这应该是相同的edit2和hide2.另外，如果我想添加进一步的编辑和隐藏类，该功能也应该能够处理此问题，例如edit3和hide3等.

到目前为止，我已经能够找到被单击的编辑范围并将其隐藏.我正在努力获得相关的隐藏"课程.谁能帮我做到这一点?到目前为止，这是我的jQuery函数:

So far, I have been able to find the edit span that is clicked on and hide it. I am struggling to get the associated "hide" class. Can anyone help me do this please? Here is my jQuery function so far:

        var spans = $("#myIntForm").find("span[class^='edit'],span[class^='hide']");

        spans.click(function() {
            var $this = $(this);
            spans.filter("span[class^='hide']").hide();
            if($this.attr('class').substr(0,4)=='edit')
                {
                    var visible = $this.filter("span[class^='"+$this.attr('class').substr(0,4)+"']");
                    visible.hide();

                    //find the class 'hide' with same ending number as class 'edit' and display it.
                    var invisible;
                }
        });

推荐答案

我以前做过类似的事情，对我来说，以某种方式分隔类名比较容易-即使用下划线，并使用ID来帮助像这样选择:

I've done something similar before, it was easier for me to delimit the classname in some way - i.e an underscore, and also using an ID to help with selecting like so:

<span class='edit' id='edit_1'>Edit 1</span>
<span class='hide' id='hide_1'>Hide 1</span>

然后您可以找到关联的类，如下所示:

Then you can find the associated classes like this:

$(function(){
  $('.hide').hide();
  $('.edit').click(function(){
    //each time an edit class is clicked, show its associated hide div
    var aNum = $(this).attr('id');
    //get the number at the end of the ID of this particular edit div           
    aNum=(aNum.substring(aNum.indexOf('_')+1, aNum.length));

    //select and show the associated hide_1 div
    $('#hide_'+aNum).show();

    //hide $(this)
    $(this).hide();
  });
});

我还没有测试过，但是您知道了. 还有一点是，我认为您不需要将$(this)分配给var，我在您的代码中看不到任何可以保证这一点的东西.

I haven't tested this but you get the idea. One other point is that I think you don't need to assign $(this) to a var, I don't see anything in your code that would warrant that.

希望这会有所帮助

忘记单击时隐藏编辑div，代码已更新

Forgot to hide the edit div on click, code updated

第二次糟糕，错过了右括号，还需要在子字符串上加上+1 :)现在可以正常工作-此处有一个示例: http://jsfiddle.net/rYMtq/

2nd Woops, missed a close bracket, also needed a +1 on the substring :) works fine now - got an example up here: http://jsfiddle.net/rYMtq/

现在您已经找到答案了，但是括号没有闭合足以让我在晚上醒来:D

A bit irrelevant now that you got an answer but an unclosed bracket is enough to keep me awake at night :D

这篇关于jQuery-使用类的最后一位找到多个关联的类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！