如何在div之間切換並取消選擇所選的div？

-1

所以我有一個問題我的HTML有一些div旁邊的價格之一divred alredy有在html中的選擇以及我必須做的是，在JS中我必須取消選擇所選內容，只是與1選中但當我選擇其中一個不會改變。如何在div之間切換並取消選擇所選的div？

這裏是我的html

<div id="package-container"> 
    <div class="package-center"> 
    <p class="green-titles"><b>AVAILABLE PACKAGES:</b></p> 
    </div> 
    <div class="coverage-types"> 
      <div class="coverage-title-container"> 
       <p><b>BASIC COVERAGE</b></p> 
      </div> 
       <p class="coverage-titles"><b>INCLUDES:</b></p> 
        <ul class="coverage-list"> 
        <li > 
         <p>CDW</p> 
        </li> 
       </ul> 
       <div class="firstPackage-confirmation"> 
        <div class="selected-package"> 
         <img src="./assets/packages/selected.png" alt=""> 
        </div> 
        <p class="coverage-price"><b>$30.98 USD</b></p> 
       </div> 
     </div> 
     <div class="coverage-types"> 
      <div class="coverage-title-container"> 
       <p><b>BASIC COVERAGE+</b></p> 
      </div> 
      <p class="coverage-titles"><b>INCLUDES:</b></p> 
       <ul class="coverage-list"> 
        <li > <p>CDW</p> </li> 
        <li > <p class="extra-space">+1 DRIVER</p> </li> 
       </ul> 
       <div class="package-confirmation"> 
        <div class="unselected-package"> 

        </div> 
        <p class="selectedCoverage-price"><b>$30.98 USD</b></p> 
       </div> 

     </div> 
     <div class="coverage-types"> 
      <div class="coverage-title-container"> 
       <p><b>MID COVERAGE</b></p> 
      </div> 
      <p class="coverage-titles"><b>INCLUDES:</b></p> 
      <ul class="coverage-list"> 
        <li > <p>CDW</p> </li> 
        <li > <p class="extra-space">+1 DRIVER</p> </li> 
        <li > <p>SURCHARGES</p> </li> 
        <li > <p>EXT. PROTECTION</p> </li> 
      </ul> 
      <div class="package-confirmation"> 
        <div class="unselected-package"> 

        </div> 
        <p class="selectedCoverage-price"><b>$30.98 USD</b></p> 
       </div>   
     </div> 
     <div class="coverage-types"> 
      <div class="coverage-title-container"> 
       <p><b>MID COVERAGE+ </b></p> 
      </div> 
     <p class="coverage-titles"><b>INCLUDES:</b></p> 
      <ul class="coverage-list"> 
       <li > <p>CDW</p> </li> 
       <li > <p class="extra-space">+1 DRIVER</p> </li> 
       <li > <p>SURCHARGES</p> </li> 
       <li > <p>EXT. PROTECTION</p> </li> 
       <li > <p>FIRST TANK</p> </li> 
      </ul> 
      <div class="package-confirmation"> 
       <div class="unselected-package"> 

       </div> 
       <p class="selectedCoverage-price"><b>$30.98 USD</b></p> 
      </div> 
    </div> 
    <div class="coverage-types"> 
     <div class="coverage-title-container"> 
      <p><b>FULL COVERAGE</b></p> 
     </div> 
     <p class="coverage-titles"><b>INCLUDES:</b></p>   
      <ul class="coverage-list"> 
       <li > <p>CDW</p> </li> 
       <li > <p class="extra-space">+1 DRIVER</p> </li> 
       <li > <p>SURCHARGES</p> </li> 
       <li > <p>EXT. PROTECTION</p> </li> 
       <li > <p>FIRST TANK</p> </li> 
      </ul> 
      <div class="package-confirmation"> 
       <div class="unselected-package"> 

       </div> 
       <p class="selectedCoverage-price"><b>$30.98 USD</b></p> 
      </div> 
    </div> 
    <div class="coverage-types"> 
     <div class="coverage-title-container"> 
      <p><b>FULL COVERAGE+</b></p> 
     </div> 
      <p class="coverage-titles"><b>INCLUDES:</b></p>   
       <ul class="coverage-list"> 
        <li > <p>CDW</p> </li> 
        <li > <p class="extra-space">+1 DRIVER</p> </li> 
        <li > <p>SURCHARGES</p> </li> 
        <li > <p>EXT. PROTECTION</p> </li> 
        <li > <p>FIRST TANK</p> </li> 
        <li > <p class="extra-space">GPS</p> </li> 
       </ul> 
       <div class="package-confirmation"> 
        <div class="unselected-package"> 

        </div> 
        <p class="selectedCoverage-price"><b>$30.98 USD</b></p> 
       </div> 
     </div> 
    </div>

，這裏是我的js

$(document).ready(function(){ 

var imagen = $('<img />'); 
    imagen.attr('src', './assets/packages/selected.png'); 

var secimagen = $('<img />'); 
    secimagen.attr('src', './assets/payment/checkmark.png'); 



$(".unselected-package").on("click",function(){ 
    $(this).addClass("selected-package"); 
    $(this).removeClass("unselected-package"); 

}) 
$(".selected-package").on("click",function(){ 
    $(".selected-packages").addClass("unselected-packages"); 
    $(".selected-packages").removeClass("selected-packages"); 

}); 

});

來源

2016-11-23 Venamus

不是有兩個'click'處理程序，是不是很容易，只需有一個設置'this'有'選擇包'類和所有其他元素有'selected-package'被刪除？ –

你正在引用複雜的類'packages'，看來你需要引用單個'package'代替。 – UncaughtTypeError

不是有兩個點擊處理程序，是不是很容易，只需有一個設置this有selected-package類和其他所有要素已被刪除selected-package？我認爲甚至不需要定義unselected-package類。這不是你拿走selected-package課程時得到的結果嗎？

這裏有一個下調例如：

$(function(){ 
 

 
$("div").on("click", function(){ 
 
    $("div").removeClass("selected"); 
 
    $(this).addClass("selected"); 
 
}); 
 

 
});

.selected { background:yellow; } 
 
div {cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Some Div</div> 
 
<div>Some Div</div> 
 
<div>Some Div</div> 
 
<div>Some Div</div> 
 
<div>Some Div</div> 
 
<div>Some Div</div>

來源

2016-11-23 16:16:56

好吧，但'unselected-package'有它自己的CSS，如果我刪除類，我將刪除CSS。 – Venamus

對不起，我還在學習JS和Jquery – Venamus

@Venamus說沒有選擇的東西會恢復到原來的樣式是不是正確？您不必刪除實際的類'unselected-package'，但應該刪除試圖添加或刪除它的代碼。 –

-1

完全斯科特同意，此外，你已經另一個問題：只有selected-package的div時存在「文件已準備就緒」，將點擊時點燃。 jQuery不知道添加了這個類的新div。無論如何，我認爲你必須從$(document).ready聲明中拿出這個函數。

來源

2016-11-23 16:23:32 Paolo81

是的，你可以使用只需一個點擊監聽器來實現這一點，在這裏我以一種很好的方式將類用於所需的div，並且我稍微改進了一點，這裏是你的工作代碼。

<p class="coverage-titles"><b>INCLUDES:</b></p>   
     <ul class="coverage-list"> 
      <li > <p>CDW</p> </li> 
      <li > <p class="extra-space">+1 DRIVER</p> </li> 
      <li > <p>SURCHARGES</p> </li> 
      <li > <p>EXT. PROTECTION</p> </li> 
      <li > <p>FIRST TANK</p> </li> 
     </ul> 
     <div class="package-confirmation"> 
      <div class="unselected-package"> 

      </div> 
      <p class="selectedCoverage-price"><b>$30.98 USD</b></p> 
     </div> 

<div class="coverage-types"> 
    <div class="coverage-title-container"> 
     <p><b>FULL COVERAGE+</b></p> 
    </div> 
     <p class="coverage-titles"><b>INCLUDES:</b></p>   
      <ul class="coverage-list"> 
       <li > <p>CDW</p> </li> 
       <li > <p class="extra-space">+1 DRIVER</p> </li> 
       <li > <p>SURCHARGES</p> </li> 
       <li > <p>EXT. PROTECTION</p> </li> 
       <li > <p>FIRST TANK</p> </li> 
       <li > <p class="extra-space">GPS</p> </li> 
      </ul> 
      <div class="package-confirmation"> 
        <div class="package"> 
This is package 
       </div> 
        <div class="package"> 
This is another package 
       </div> 
       <p class="selectedCoverage-price"><b>$30.98 USD</b></p> 
     `` </div> 
    </div>

，這是你的JS代碼

$(document).ready(function(){ 
$(".package").click(function(){ 
$(".package").removeClass("selected"); 
$(this).addClass("selected"); 
}); 
});

來源

2016-11-23 16:46:07

這與我的回答有什麼不同？ –

在你的答案中，你在所有的div上設置了點擊監聽器，我使用了類名「package」的特定div，這更有意義，因爲在他的HTML代碼中也有其他div。如果我們在代碼中解決他們的問題，用戶可以更好地理解。這與你的答案不同。 –

我的回答是（正如我所說）一個修剪下來的例子，但你所展示的與我所做的沒有什麼不同。 –

如何在div之間切換並取消選擇所選的div？

回答

相關問題