Question

我有多个标记块，显示通过

之类的东西切换

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

这些块很少通过标签，id或父/子结构来识别。因此，我有一个非常拥挤的地方，所有这些块都要显示/不显示和触发器，我想知道，如果这不是可以简化的。所以我想做那样的事情：

通过在其类名中添加特殊字符串来识别触发器的目标，例如：

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

因此有机会获得触发器的类名＆gt;将其保存在变量＆gt;将字符串（在此示例中为“_target”）添加到现有触发器名称并切换该类名称？

这样的事情是否有意义，或者对于像我这样的非编码人员来说，是否有更优雅 - 可行的方法 - 这样做？

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

如果这是有意义的，我如何将var targetname附加到URL（在上面显示的那个场景中作为URL-param，如“？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>

Answer 1

使用此脚本

            $(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>

Answer 2

假设改变所有html部分是可以接受的，你可以为触发器和目标分配多个类，这样只有具有相应类的目标（除了＆＃39;触发器＆＃39;）才会受到影响。

e.g。触发：

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

实例：jsfiddle

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

关于使用url参数：通过使用组合类构造，您始终可以使用jquery .target.classtype构造获取所需的任何目标对象，其中classtype由您的（url）参数确定

多个切换更好的结构

2 个答案: