Jquery 多个开关结构更好

我有多个标记块，它们的显示可以通过如下方式进行切换

$(".trigger").click(function() {
    $(".target").toggle(showOrHide);
});

通常，这些块很少通过标记、id或父/子结构识别。因此，我有一个相当拥挤的地方，有所有那些要显示/不显示的块和触发器，我想知道，这是否是不可简化的。因此，我想这样做：

通过向触发器的类名添加特殊字符串，使触发器的目标可识别，如：

$(".foo").click(function() {
    $(".foo_target").toggle(showOrHide);
});

因此，是否有机会获取触发器的类名>将其保存在变量中>将本例中的字符串添加到现有触发器名称并切换该类名

这样做有意义吗，或者对于像我这样的非程序员来说，有没有更优雅、更可行的方法呢

$("this").click(function() {
    var targetname = $(this).attr("class");
    if ($("targetname:contains('trigger')")) {
        var targetname = targetname."_target";
    }
});

如果这有意义的话，在上面所示的场景中，我如何将var targetname作为URL参数附加到URL中，比如？q=targetname

非常感谢

这是一个可以放在方案中的场景，但这并不是我真正想要的：

 <section id="autoren-teaser">
        <div>
            <h3 class="trigger">Cat</h3>
        </div>
        <div>
            <h3 class="trigger">Bird</h3>
        </div>
        <div>
            <h3 class="trigger">Dog</h3>
        </div>
    </section>
        <div class="target">
                <img src="cat.gif" />
                <h2>Content_foo</h2>
                <p>Foo</p><a class="knopf trigger_zu">Schliessen</a>
        </div>
 <div class="target">
                <img src="dog.gif" />
                <h2>Content_foo</h2>
                <p>Foo</p><a class="knopf trigger_zu">Schliessen</a>
        </div>
 <div class="target">
                <img src="bird.gif" />
                <h2>Content_foo</h2>
                <p>Foo</p><a class="knopf trigger_zu">Schliessen</a>
        </div>

用这把剪刀

            $(document).ready(function(){
                // make the toggle buttons work
                $(".trigger").click(function(event) {
                    $($(event.target).attr('class').replace("trigger ",".target."))
                        .toggle("hidden");
                });

                // make the close buttons work
                $(".trigger_zu").click(function(event) {
                    $(event.target).parent().toggle("hidden");
                });
            });

我可以做到这一点

        <section id="autoren-teaser">
            <div>
                <h3 class="trigger cat">toggle Cat</h3>
            </div>
            <div>
                <h3 class="trigger bird">toggle Bird</h3>
            </div>
            <div>
                <h3 class="trigger dog">toggle Dog</h3>
            </div>
        </section>
        <div class="target cat">
                <h2>Content_Cat</h2>
                <img src="cat.gif" />
                <a class="knopf trigger_zu">Close</a>
        </div>
        <div class="target bird">
                <h2>Content_Dog</h2>
                <img src="dog.gif" />
                <a class="knopf trigger_zu">Close</a>
        </div>
        <div class="target">
                <h2>Content_Bird</h2>
                <img src="bird.gif dog" />
                <a class="knopf trigger_zu">Close</a>
        </div>

---

假设修改所有html部分是可以接受的，您可以将多个类同时分配给触发器和目标，这样只有具有除“触发器”之外的相应类的目标才会受到影响

e、 g。 触发：

实例：

replace只是从类属性trigger cat中删除trigger，并修剪以删除前导/尾随空格。“.target.”+targettype创建jquery类标准，以匹配具有指定类类型的所有目标。如果您想使用多个类，则需要进行一些额外的类解析，但这不应该是太多的工作

---

关于使用url参数：通过使用组合类构造，您总是可以通过jquery.target.classtype构造获得您想要的任何目标对象，其中classtype由url参数确定

HTML在所有实例中都是相同的吗？如果是的话，你能举个例子吗？你不需要为所有元素创建唯一的标识。分享你的html。这不是一个单一问题的解决方案，而是一般性的思考：通常我在一个项目中有3-6个块，必须切换。他们也没有真正的计划。它可能是位于页脚的触发器，而目标是文章中的一个部分。当然，它也可以是父元素，需要切换子元素。虽然我添加了一些东西，但正如我所说的，这并不是为了让它工作，而是为了有一种切换元素的全局例程。knopf=button，Schliessen=close

<h3 class="trigger cat">Cat</h3>

 <div class="target cat">

$(".trigger").click(function() {
    var targettype = $(this).attr('class').replace('trigger','').trim();
    if(targettype)            
       $('.target.' + targettype).toggle();
});