'n'요소에 순수 자바 스크립트가있는 CSS 클래스 간 전환

Question

사용자가 제품 중 하나를 클릭 할 때 (각 요소에 동일한 ID가 할당 됨 card-reveal) 기능에 대한 작업을 수행하면 컨테이너에 CSS class이 구체적으로 추가됩니다 (활성 상태)를 클릭하여 특정 항목에 대한 정보를 표시 한 다음 마지막으로 사용자가 취소 버튼을 클릭하면 CSS 클래스가 제거됩니다 (활성화 상태는 사라짐).

불행히도 첫 번째 요소를 클릭하면 해당 요소에 클래스를 추가하지만 클릭 한 다른 요소는 클래스를 추가하지 않고 닫기 버튼이 전혀 작동하지 않는 몇 가지 문제가 발생했습니다. 해결책을 끝내고 싶습니다 순수 자바 스크립트. 또한 몇 가지 classie() 메서드가있는 경우 Classie.js을 사용하여 CSS 클래스 전환을 돕고 있습니다.

도움이 될 것입니다! 고맙습니다! 아래

HTML을

<a id="card-reveal" class="card-view" href="javascript:void(0)"><h3 class='hover-title'>View More</h3></a> 
<div class="card-cover"> 
          <span class="card-exit"></span> 

          <a class="card-follow" href="javascript:void(0)">Follow {{object.product_website_name}}.com</a> 
          <a class="card-buy" target="_blank" href="{{object.product_slug_url}}">Buy {{object.product_name }}</a> 
          <a id="card-close" class="card-info" href="javascript:void(0)"><span class="icon-indie_web-03"></span></a> 
          <ul class="card-social"> 
           <label>Share</label> 
           <li><a href="#"><span class="icon-indie_web-04"></span></a></li> 
           <li><a href="#"><span class="icon-indie_web-05"></span></a></li> 
          </ul> 
         </div> 

CSS

.card-cover { 
    width:100%; 
    height: 100%; 
    background: none repeat scroll 0% 0% rgba(255, 91, 36, 0.9); 
    color: #FFF; 
    display: block; 
    position: absolute; 
    opacity: 0; 
    z-index:200; 
    overflow: hidden; 
    -webkit-transform:translate3d(0, 400px, 0); 
    transform:translate3d(0, 400px, 0); 
    -webkit-backface-visibility:hidden; 
    backface-visibility: hidden; 
    -webkit-transition-property:opacity, transform; 
    transition-property:opacity, transform; 
    -webkit-transition-duration:0.2s; 
    transition-duration:0.2s; 
    -webkit-transition-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1); 
    transition-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1); 
    -webkit-transition-delay: 0s; 
    transition-delay: 0s; 
} 


.card-cover.card--active { 
    opacity: 1; 
    -webkit-transform:translate3d(0, 0, 0); 
    transform:translate3d(0, 0px, 0); 
} 

JS : 내가 뭘 생각할 수있는 두 가지 간단한 방법이 있습니다

var cardContainer = document.querySelector('.card-cover'), 
       cardTargets = Array.prototype.slice.call(document.querySelectorAll('#card-reveal')), 
       eventType = mobilecheck() ? 'touchstart' : 'click', 
       cardClose = document.getElementById('card-close'), 
       resetMenu = function() { 
        classie.remove(cardContainer, 'card--active'); 
       }, 
       resetMenuClick = function() { 
        cardCloseaddEventListener(globalMenuEventType, function() { 
         resetMenu(); 
         document.removeEventListener(eventType, resetMenuClick); 
        }, false);  
       }; 

      cardTargets.forEach(function (element, index) { 


       if(element.target) { 
        element.addEventListener(eventType, function(event) { 
         event.preventDefault(); 
         event.stopPropagation(); 

         classie.add(cardContainer, 'card--active'); 

         document.addEventListener(eventType, resetMenuClick); 
        } ,false); 
       } 

      }); 

Answer 1

이 같은.

먼저 각 카드에 ID를 지정할 수 없다면 (카드가없는 것처럼 들릴 수 있음) 클래스 이름을 사용해야합니다. 주석에 언급 된 것처럼 여러 요소에 대해 동일한 ID를 사용하고 싶지는 않습니다.

아래의 예에서 볼 수 있듯이 .getElementById() 메소드는 하나의 요소 만 반환하기 때문에, .getElementsByClassName() 같은 다른 메소드는 집단.

우리가 해결하려고하는 문제는 표시/숨기기를 원하는 하위 컨텐츠가 어떻게 든 클릭하는 요소에 첨부되어야한다는 것입니다. 우리는 ID를 사용하지 않기 때문에 클래스 이름을 요소간에 고유하게 사용할 수는 없으므로 컨테이너 내부의 정보로 div를 전환하는 요소가 포함됩니다.

컨테이너 div 안에 콘텐츠 용으로 두 개의 div가 있습니다. 하나는 항상 볼 수있는 메인 컨텐츠이고, 다른 하나는 메인 컨텐츠가 클릭되었을 때만 보이게됩니다 (다시 클릭 할 때 보이지 않게됩니다).

이 방법의 이점은 걱정할 ID가 없으므로 카드를 복사/붙여 넣기 할 수 있으며 동일한 동작을 나타냅니다.

var maincontent = document.getElementsByClassName("main-content"); 
 
// Note: getElemenstByClassName will return an array of elements (even if there's only one). 
 

 
for (var i = 0; i < maincontent.length; i++) { 
 
    //For each element in the maincontent array, add an onclick event. 
 
    maincontent[i].onclick = function(event) { 
 

 
    //What this does is gets the first item, from an array of elements that have the class 'sub-content', from the parent node of the element that was clicked: 
 
    var info = event.target.parentNode.getElementsByClassName("sub-content")[0]; 
 

 
    if (info.className.indexOf("show") > -1) { // If the 'sub-content' also contains the class 'show', remove the class. 
 
     info.className = info.className.replace(/(?:^|\s)show(?!\S)/g, ''); 
 
    } else { // Otherwise add the class. 
 
     info.className = info.className + " show"; 
 
    } 
 
    } 
 
}

.container { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    margin: 5px; 
 
} 
 
.main-content { 
 
    margin: 5px; 
 
    cursor: pointer; 
 
} 
 
.sub-content { 
 
    display: none; 
 
    margin: 5px; 
 
} 
 
.show { 
 
    /* The class to toggle */ 
 
    display: block; 
 
    background: #ccc; 
 
}

<div class="container"> 
 
    <div class="main-content">Here is the main content that's always visible.</div> 
 
    <div class="sub-content">Here is the sub content that's only visible when the main content is clicked.</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="main-content">Here is the main content that's always visible.</div> 
 
    <div class="sub-content">Here is the sub content that's only visible when the main content is clicked.</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="main-content">Here is the main content that's always visible.</div> 
 
    <div class="sub-content">Here is the sub content that's only visible when the main content is clicked.</div> 
 
</div>

두 번째 방법, 당신은/숨기기를 표시 할 내용에 대해 하나 개의 사업부를 사용하는 것, 그리고 요소를 클릭하면 가시성을 모두 전환하고 그 콘텐츠입니다.

이전 예제를 기반으로 사용 하겠지만 이상적으로는 반응, 녹아웃 또는 각도와 같은 MVVM 프레임 워크가 있으면 콘텐츠 작성에 도움이됩니다.이 예제에서는 하위 컨텐츠의 div 텍스트를 사용하려고합니다.

var info = document.getElementById("Info"); 
 
var maincontent = document.getElementsByClassName("main-content"); 
 

 
for (var i = 0; i < maincontent.length; i++) { //getElemenstByClassName will return an array of elements (even if there's only one). 
 
    maincontent[i].onclick = function(event) { //For each element in the maincontent array, add an onclick event. 
 

 
    //This does the same as before, but I'm getting the text to insert into the info card. 
 
    var text = event.target.parentNode.getElementsByClassName("sub-content")[0].innerHTML; 
 
    info.innerHTML = text; // Set the text of the info card. 
 

 
    info.style.display = "block"; //Make the info card visible. 
 
    } 
 
} 
 

 
info.onclick = function(event) { 
 
    info.style.display = "none"; // If the info card is ever clicked, hide it. 
 
}

.container { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 
.main-content { 
 
    margin: 5px; 
 
    cursor: pointer; 
 
} 
 
.sub-content { 
 
    display: none; 
 
    margin: 5px; 
 
} 
 
#Info { 
 
    cursor: pointer; 
 
    display: none; 
 
}

<div id="Info" class="container">Here is some test information.</div> 
 
<div class="container"> 
 
    <div class="main-content">Link 1.</div> 
 
    <div class="sub-content">You clicked link 1.</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="main-content">Link 2.</div> 
 
    <div class="sub-content">You clicked link 2.</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="main-content">Link 3.</div> 
 
    <div class="sub-content">You clicked link 3.</div> 
 
</div>