兩個切換和兩個點擊相同的功能，每次點擊都有不同的行爲

我嘗試用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>

來源

2017-10-18 Nelh Amstrong

我放棄你的代碼放到一個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>

來源

2017-10-18 11:21:20

這是工作兄弟，但是當你點擊第二次在同一張卡上我想隱藏它或顯示 –

@NelhAmstrong你現在可以檢查它嗎？ –

這應該隱藏單擊文章而不破壞其它功能：

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

來源

2017-10-18 12:03:38 delinear

兩個切換和兩個點擊相同的功能，每次點擊都有不同的行爲

回答

相關問題