两个切换和两个点击相同的功能，每次点击都有不同的行为

问题描述：

我尝试用java-script创建一个事件，这将允许我在不同的卡之间切换并隐藏和显示。有一张四张卡片，当你点击第一张卡片时，它显示卡片下面的信息，当你再次点击它时，它隐藏它，四张卡片同样的东西，，但我也希望当你点击第二张或第三张卡在第一张卡打开的情况下，会自动关闭第一张以显示第二张。再次在四张牌之间切换事件。两个切换和两个点击相同的功能，每次点击都有不同的行为

我尝试使用点击两次，但似乎我创建了两者之间的冲突。

我该如何解决这个问题。

这是我使用的代码：

$("a[data-toggle]").on("click", function(e) { 
 
     e.preventDefault(); // prevent navigating 
 
     var selector = $(this).data("toggle"); // get corresponding element 
 
     $("article").hide(); 
 
     $(selector).show(); 
 
    });

article:not(#article1) { 
 
     display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-toggle="#article1">cart1</a> 
 
<a href="#" data-toggle="#article2">cart 2</a> 
 
<a href="#" data-toggle="#article3">cart 3</a> 
 
<a href="#" data-toggle="#article4">cart 4</a> 
 
    
 
<article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
<article id="article2">sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
<article id="article3">consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
<article id="article4">adipiscing elit, sed do eiusmod tempor</article>

我放弃你的代码放到一个codepen，但我不明白你在想什么实现，因为它似乎为我工作？ https://codepen.io/anon/pen/MEZqEv?editors=1010在选项之间点击会显示相关文章，您能否准确解释您期望看到的以及您实际看到的内容？ – delinear

当我点击卡之间它显示文章它的工作，但同样我也想，如果卡3打开我想，当我点击它它隐藏或显示 –

我添加下面的函数来获得两个事件但我现在有两个点击，只有第一个功能正在运行 –

答

这里是一个小修改的方法做你的来回切换的功能，请家长添加到所有的article元素，并设置为display:none ，当你想显示它时，请追加类active。

让我知道这是否解决了您的问题！

$("a[data-toggle]").on("click", function(e) { 
 
    e.preventDefault(); 
 
    var toggleThis = $('article' + $(this).attr('data-toggle') + '') 
 
    if (toggleThis.hasClass('active')) { 
 
    toggleThis.toggleClass('active'); 
 
    } else { 
 
    $("article.active").removeClass('active'); 
 
    toggleThis.addClass('active'); 
 
    } 
 
});

.wrapper article { 
 
    display: none; 
 
} 
 

 
article.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-toggle="#article1">cart1</a> 
 
<a href="#" data-toggle="#article2">cart 2</a> 
 
<a href="#" data-toggle="#article3">cart 3</a> 
 
<a href="#" data-toggle="#article4">cart 4</a> 
 
<div class="wrapper"> 
 
    <article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
    <article id="article2" class="active">sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
    <article id="article3">consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
    <article id="article4">adipiscing elit, sed do eiusmod tempor</article> 
 
</div>

这是工作兄弟，但是当你点击第二次在同一张卡上我想隐藏它或显示 –

@NelhAmstrong你现在可以检查它吗？ –

答

这应该隐藏单击文章而不破坏其它功能：

$("article").click(function() { 
    $(this).hide(); 
});

两个切换和两个点击相同的功能，每次点击都有不同的行为

相关推荐