如何在div之间切换并取消选择所选的div？

时间：2016-11-23 16:08:45

标签： javascript jquery html css

所以我有一个问题我的html有一些div除了价格其中一个div alredy在html中选择了我要做的是在JS中我必须取消选中所选的并且只是选择1但是当我选择一个时，另一个不会改变。

这是我的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");

});

});

3 个答案:

答案 0 :(得分：0)

不是拥有两个点击处理程序，而是让一个this设置selected-package类以及删除selected-package的所有其他元素更容易？我不认为甚至需要定义unselected-package类。当你拿走selected-package课程时，你得到的是什么？

这是一个精简的例子：

＆＃13;
＆＃13; 
$(function(){

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

});
＆＃13; 
.selected { background:yellow; }
div {cursor: pointer; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

是的，你可以只使用一个点击监听器来实现这一点，在这里我以一种好的方式使用了你想要的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");
});
});

答案 2 :(得分：-1)

完全同意Scott，另外还有另一个问题：只有“文档准备就绪”时存在的selected-package div才会点击。 jQuery不知道添加了这个类的新div。在任何情况下，我认为你必须从$(document).ready声明中推出该函数。

相关问题
最新问题