目標最近的圖標將其更改爲另一個圖標

Question

我在同一頁面中有一系列卡片。下面是這個例子下面的例子，我爲這個例子只提供了1張卡片（但還有更多）。

我無法使用jquery'nearest'或'siblings'或類似的方式做以下操作：當用戶點擊一張卡片時，它會崩潰並且javascript會顯示內容。我需要在那個時候用「減號圖標」替換「加號圖標」。 （只有在這個特定卡所以不使用在任何點包含在下面的例子將卡354'的數目的ID或類）

Jsfiddle Demo

的JavaScript應針對圖標，但它不會改變當我點擊

如果您在製作內容時遇到麻煩，請不要擔心，這不是問題的重點。我只想知道如何定位圖標並將其更改爲glyphicon減號。

HTML

<div id="operation-zone"> 
    <ul class="cards-list"> 

    <li class="card 354" data-opcode="CATIMINI26"> 

     <div class="card-content" id="accordion_354"> 

     <a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354"> 
     <i class="glyphicon glyphicon-plus detail-icon_354"></i> 
     </a> 

     <div class="card-image card-lazy-preloader" id="accordion2">    
     <a href="/campaigns/xxxxx"> 
        </a><figure><a href="/campaigns/xxxxxx">    
         <!-- responsive image --> 
         <img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr"> 
        </figure> 

      </div> 



     </div> 

     <div id="collapseOne_354" class="smux details details_354 panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;"> 
      <div id="DivHomeOperationDates" class="dates"> 
       Jusqu'au <span class="brand-color">mercredi 06/04 6h</span> 
      </div> 

      <div id="DivHomeOperationDescription_52850" class="description"> 
       operation in venicesqqsqssqsqsqsqsqsqss qui ravira les petits et les grands ! Retrouvez Les Schtroumpfs, Les Rebelles de la Foret, Hotel Transylvanie et bien d'autres encore... 
      </div> 

      <div class="card-info-actions"> 
      <a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now &gt;</a> 
      </div> 
     </div> 

     <!-- end of campaign card details on 1-column view--> 


    </li> 

      </ul> 


    </div> 

的Javascript

$('#collapseOne_354').on('shown.bs.collapse', function() { 
    $(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus"); 
}); 
$('#collapseOne_354').on('hidden.bs.collapse', function() { 
    $(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
}); 

CSS

.cards-list { 
    list-style: none; 
    display: block; 
    height: auto; 
} 
.card { 
    text-align: left; 
    width: 100%; 
    border-bottom: 1px solid black;  
    position: relative; 
} 

.card-content { 
    background: #fff; 
    position: relative; 
} 
.card-image { 
    vertical-align: top; 
    img { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     color: green; 
    } 
    position: relative; 
    line-height: 0; 
    overflow: hidden; 
    padding-bottom: 33.88%; 
} 
.container .jumbotron { 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.card-detail-opener { 
     color: green; 
     font-size: 16px; 
     text-align: center; 
     padding-left: 1px; 
     width: 25px; 
     height: 25px; 
     border-radius: 50%; 
     line-height: 27px; 
     background: grey; 
     position: absolute; 
     z-index: 2; 
     opacity: .75; 
     filter: alpha(opacity=75); 
     bottom: 60%; 
     right: 30%; 
     &:hover { background: #7E7E7E; } 
     &:focus { background: #7E7E7E; } 
    } 

} 

.card-detail-opener:link { 
    color: green; 

} 
.glyphicon.glyphicon-remove { 
    color: #333; 
    &:hover { color: green; } 
    &:focus { color: green; } 
} 
.glyphicon.glyphicon-plus { 
    top:1px; 
     color: #333; 
     &:hover { color: #ffffff; } 
     &:focus { color: #ffffff; } 

} 
.glyphicon.glyphicon-minus {  
     top:2px; 
     padding-right: 2px;//tweak to center 
     color: #333; 
     &:hover { color: #ffffff; } 
     &:focus { color: #ffffff; } 

} 


// Content of the card details in the 1-column view 
.card .details { 

     padding-top: 10px; 
     background-color: rgba(255,255,255,1); 

} 
.details { 
    padding-left: 1em; 
} 
.details .dates { 
    padding-top: 10px; 
    font-size: .8em; 
    line-height: 1.6em; 
    color: #464650; 
    margin-right: 1em; 
    background-size: 90px auto !important; 
    background-repeat: no-repeat !important; 
    background-position-x: right !important; 
    background-position-y: 0px !important;  
    margin-bottom: 8px; 
} 
.details .baseline { 
    color: #888; 
    font-size: 0.75em; 
    line-height: 0.4em; 
} 
.details .description { 
    font-size: .65em; 
    color: #464650; 
    line-height: 1.1em; 
    overflow: hidden; 

} 
// End of content of the card details in the 1-column view 
.card-info-actions { 
    float: right; 
    padding: 0 5px 2px 0; 
    clear: both; 
} 
//smaller buttons for cards 
.card-info-actions .btn-primary { 
    font-size: 15px; 
} 

.card-short-info a.dateSales { 
    color: #464650; 
} 
.info-overlay { 
    display:none; 
    z-index:999; 
    position:absolute; 
    height:100%; 
    width: 100%; 
    background-color: rgba(255,255,255,.9); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9"; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF); 
    transition: all .4s ease-in-out; 
    border-bottom: 4px solid green; 
} 

.close-overlay { 
    float:right; 
    padding:5px; 
} 

.info-overlay a { 
    display: block; 
    line-height: normal; 
    text-decoration: none; 
    cursor: pointer; 
} 

Answer 1

的ID是錯誤collapseOne_354，而你是結合collapseOne

編輯 我會達到與

var list = $('.cards-list') 
$('li', list).click(function(e){ 
    var card=$(this); 
    $(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus"); 
});