在jquery中获取span类值

Question

我无法获得在jquery中单击哪个span类的值。如果条件，则将两个不同的sapn值的值放入。喜欢if（span value == this）{} else {} 我需要在jquery函数中使用span值。 这是我的代码：

<div class="two toggle_height">
    <h6 style="padding: 0 171px;">Is Active</h6>
    <div class="button-wrap button-active">
      <div class="button-bg">
         <div class="button-out"><span class="out">OFF</span></div>
         <div class="button-in"><span>ON</span></div>
         <div class="button-switch"></div>
      </div>
    </div>
  </div>
 Jquery:


   $('.button-wrap').on("click", function(){ 
   $(this).toggleClass('button-active');
   });

＆＃13;

＆＃13;

$('.button-wrap').on("click", function(){
    
    $(this).toggleClass('button-active');
    
});

＆＃13;

.two .button-wrap {
width: 113px;
margin: 7px auto 0;
cursor: pointer;
padding: 1px; 
}
.two .button-bg {
width: 100%;
background-color: #ddd;
border-radius: 0px;
padding: 2px 0px;
color: #fff;
----------
transition: all 0.2s ease;  
}
.two .button-active .button-bg {
background-color: #22dd22;
}
.two .button-switch {
position: relative;
left: 0px;
width: 37px;
height: 16px;
border: solid 5px;
border-radius: 0px;
transition: all 0.2s ease;
margin-top: 1px;
text-align: center;
margin-left: 1px;
}
.two .button-active .button-switch {
left: 62px;
}
.two .button-in,
.two .button-out {
position: absolute;
transition: all 0.2s ease;
padding-top: 4px;
font-size: 0.8em;
text-transform: uppercase;
font-weight: bold;
padding-left: 4px;
}
.two .button-in {
margin-left: 75px;
}
.two .button-out {
margin-left: 18px;
color: #dd2222;
}
.two .button-active .button-out {
color: #fff;
}
.two .button-active .button-in {
color: #22dd22;
}
.two .button-active .button-bg {
background-color: #000;
}
/*.............
btn closed
.............*/
.out{
margin-left: -7px;
}
.all_btns{
/* [disabled]float:right; */
}
.upload_img{
margin-left: -3px;
}
.footer_botm{
margin-bottom: -19px;
}
.footer_botm{
margin-bottom: -19px;
background-color: rgba(232, 219, 219, 0.4);
border-radius: 6px;
}
.choose_efil{
margin-left: 4px !important;
}
element.style {
}
.total_footer.title {
margin-top: 11px;
padding: 5px;
width: 98%;
margin-bottom: -30px;
}
.txt_label{
margin-left: -12px !important;
}
.two {
margin-left: 7px;
margin-top: -29px;
}
.module_toggle{
margin-top: -13px !important;
margin-left: -36px !important;
}

＆＃13;

<div class="two toggle_height">
                                <h6 style="padding: 0 171px;">Is Active</h6>
                                    <div class="button-wrap button-active">
                                        <div class="button-bg">
                                            <div class="button-out"><span class="out">OFF</span></div>
                                            <div class="button-in"><span>ON</span></div>
                                            <div class="button-switch"></div>
                                           
                                                
                                        </div>
                                    </div>
                            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$(".out").on("click", function()
{
   alert( $(".out").html()) // alerts OFF
})

Answer 2

您可以尝试：

$('.button-in span').text()或$('.button-in span').html()

JQuery API