-1

我的 jQuery 代码有问题，我希望页面滑动切换一个 div 另一个被单击，问题是我不想一次又一次地编写所有代码，所以我尝试创建一个可以工作的代码时间，但我被困住了。Box 是应该单击的 div，它应该包含一个类，该类也用于将要滑动切换的 div。它应该从选项卡中拉出类，然后使用它来滑动切换正确的对象。请帮助：S（元素没有相互靠近，这使得下一个或孩子不可能）。如果您有任何问题 - 问！

我的jQuery代码：

$(".box").click(function() {
   var Klassen = $(this).attr("class");
   $("Klassen").slideToggle(300);
});

HTML：

<!-- These should be clicked -->
       <div data-toggle-target="open1" class="box ft col-lg-3">
            <div class="mer">
                Läs mer
            </div>

            <div class="bild"><img src="images/sakerhet.jpg"></div>

            <h4>HöstlovsLAN</h4>
        </div>
        </a>
        <div data-toggle-target="open2" class="box st col-lg-3">
            <div class="mer">
                Läs mer
            </div>

            <div class="bild"><img src="images/sakerhet.jpg"></div>

            <h4>NyårsLAN</h4>
        </div>
        <div data-toggle-target="open3" class="box tt col-lg-3">
            <div class="mer">
                Läs mer
            </div>

            <div class="bild"><img src="images/sakerhet.jpg"></div>

            <h4>Säkerhet</h4>
        </div>
<!-- These should be toggled -->
        <div class="infobox" id="open1">
        <h1>HöstlovsLAN</h1>
        </div>
        <div class="infobox" id="open2">
        <h1>NyårsLAN</h1>
        </div>
        <div class="infobox" id="open3">
        <h1>Säkerhet</h1>
        </div>

编辑 - 新问题 - 仍然不起作用！

该代码在我的情况下不起作用，希望您看看我创建的 JS-fiddle：http: //jsfiddle.net/Qqe89/

4

3 回答 3

1

undefined 提出了解决方案。

我会警告您使用这种方法，如果您向.boxdiv 添加任何类，那么您的代码将会中断。

而是考虑使用数据属性来定位要切换的 div：

<div data-toggle-target="open1" class="box green"></div>

<div id="open1">
    Opens
</div>

然后可以使用

$('.box').click(function (e) {
    $( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});

jsFiddle使用您的 html 示例 - 粗略地格式化对不起！

于 2013-09-02T15:10:00.197 回答
0 
$(".box").click(function() {
       var Klassen = $(this).attr("class");
       $("."+Klassen).slideToggle(300);
});
于 2013-09-02T14:57:19.080 回答
0

  1. class 属性可能包含多个类 ( $(this).attr("class")OR this.className)

  2. $("."+Klassen)如果有几个类将不起作用

  3. “Klassen”不对应任何 DOM 元素，因为 HTML 中没有这样的标签。

于 2013-09-02T15:04:11.220 回答