表内容的变化取决于下拉选项

我必须通过引导和1个简单的Javascript下拉菜单制定的定价表。表内容的变化取决于下拉选项

如果用户选择“选项1”，那么当前表示“获得100封电子邮件”更改为“获得300封电子邮件”和“每天最多电子邮件数量：3”的项目符号更改为“最大电子邮件每天：6“。

如果用户选择“选项2”，则当前显示“获得100封电子邮件”的项目符号点变为“获得600封电子邮件”和“每天最多电子邮件数：3”更改为“每天最大电子邮件数： 10" 。

可惜我不是一个JavaScript专家（我是极其恶劣的JS），所以我会感谢你的帮助。

$(document).ready(function() { 
 
    $(".btn-select").each(function (e) { 
 
     var value = $(this).find("ul li.selected").html(); 
 
     if (value != undefined) { 
 
      $(this).find(".btn-select-input").val(value); 
 
      $(this).find(".btn-select-value").html(value); 
 
     } 
 
    }); 
 
}); 
 

 
$(document).on('click', '.btn-select', function (e) { 
 
    e.preventDefault(); 
 
    var ul = $(this).find("ul"); 
 
    if ($(this).hasClass("active")) { 
 
     if (ul.find("li").is(e.target)) { 
 
      var target = $(e.target); 
 
      target.addClass("selected").siblings().removeClass("selected"); 
 
      var value = target.html(); 
 
      $(this).find(".btn-select-input").val(value); 
 
      $(this).find(".btn-select-value").html(value); 
 
     } 
 
     ul.hide(); 
 
     $(this).removeClass("active"); 
 
    } 
 
    else { 
 
     $('.btn-select').not(this).each(function() { 
 
      $(this).removeClass("active").find("ul").hide(); 
 
     }); 
 
     ul.slideDown(300); 
 
     $(this).addClass("active"); 
 
    } 
 
}); 
 

 
$(document).on('click', function (e) { 
 
    var target = $(e.target).closest(".btn-select"); 
 
    if (!target.length) { 
 
     $(".btn-select").removeClass("active").find("ul").hide(); 
 
    } 
 
});

/* Custom */ 
 

 

 
.btn-select { 
 
    position: relative; 
 
    padding: 0; 
 
    width: 100%; 
 
    border-radius: 2px; 
 
    margin-bottom: 13px; 
 
} 
 

 
.btn-select .btn-select-value { 
 
    padding: 6px 12px; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 34px; 
 
    text-align: left; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    border-top: none !important; 
 
    border-bottom: none !important; 
 
    border-left: none !important; 
 
} 
 

 
.btn-select .btn-select-arrow { 
 
    float: right; 
 
    line-height: 20px; 
 
    padding: 6px 10px; 
 
    top: 0; 
 
} 
 

 
.btn-select ul { 
 
    display: none; 
 
    background-color: white; 
 
    color: black; 
 
    clear: both; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    border-top: none !important; 
 
    position: absolute; 
 
    left: -1px; 
 
    right: -1px; 
 
    top: 33px; 
 
    z-index: 999; 
 
} 
 

 
.btn-select ul li { 
 
    padding: 3px 6px; 
 
    text-align: left; 
 
} 
 

 
.btn-select ul li:hover { 
 
    background-color: #f4f4f4; 
 
} 
 

 
.btn-select ul li.selected { 
 
    color: white; 
 
} 
 

 
span.mini { 
 
    font-size: 18px; 
 
    color: #31708f; 
 
} 
 
span.more { 
 
    font-size: 14px; 
 
    color: #337ab7; 
 
} 
 
.info { 
 
    display: none; 
 
    position: absolute; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    bottom: 60px; 
 
    left: 5%; 
 
    background: #337ab7 !important; 
 
    padding: 10px; 
 
    text-align: left; 
 
    line-height: 1.5; 
 
    color: #fff; 
 
    border: 3px #ddd solid; 
 
} 
 
.info:after { 
 
    content: "\e252"; 
 
    font-family: 'Glyphicons Halflings'; 
 
    color: #337ab7; 
 
    position: absolute; 
 
    bottom: -14px; 
 
    left: 45%; 
 
} 
 
.panel-footer:hover .info { 
 
    display: inline-block; 
 
} 
 

 

 

 

 
/* icons */ 
 

 
span.glyphicon-preload { 
 
    color: #23b070; 
 
    padding-right: 7px; 
 
    font-size: 13px; 
 
} 
 
span.glyphicon-prio { 
 
    color: #fff; 
 
} 
 

 
span.glyphicon-more { 
 
    font-size: 11px; 
 
} 
 
.table { 
 
    margin-bottom: 0; 
 
} 
 
.table>tbody>tr>td { 
 
    padding: 14px; 
 
} 
 
.btn-insta { 
 
    margin-top: 13px; 
 
    padding: 10px 0; 
 
    font-size: 20px; 
 
} 
 
.table-premium p { 
 
    font-weight: 700; 
 
    display: inline-block; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="col-xs-12 col-md-6"><!-- table#2-starts --> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Premium</h3> 
 
     </div> 
 
      <div class="panel-body"> 
 
       <div class="the-price"> 
 
        <a class="btn btn-default btn-select btn-select-light"> 
 
        <input type="hidden" class="btn-select-input" id="" name="" value="" /> 
 
        <span class="btn-select-value">Select an Option</span> 
 
        <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span> 
 
        <ul> 
 
        <li>Option 1</li> 
 
        <li>Option 2</li> 
 
        <li>Option 3</li> 
 
        <li>Option 4</li> 
 
        </ul> 
 
        </a> 
 
       <span class="mini">Monthly Subscription</small> 
 
       <a href="#" class="btn btn-block btn-insta btn-success" role="button">Activate</a>  
 
       </div> 
 
      <table class="table table-premium"> 
 
      <tr> 
 
       <td> 
 
        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Gain 100 Emails</p> 
 
       </td> 
 
      </tr> 
 
      <tr class="active"> 
 
       <td> 
 
        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Emails 0 Back</p> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>No Survey Required</p> 
 
       </td> 
 
      </tr> 
 
      <tr class="active"> 
 
       <td> 
 
        <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Max Emails per Day: 3</p> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
      <div class="panel-footer"> 
 
       <span class="more"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More information!</span> 
 
        <div class="info well"> 
 
        <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br> 
 
        <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 1 <br> 
 
        <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 2 <br> 
 
        <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 3 <br></span> 
 
        </div><!-- well --> 
 
      </div><!-- p-f --> 
 
     </div> 
 
    </div><!-- t#2-ends -->

来源

2017-01-05 Morgari

哎@Morgari你能告诉什么将是一个需要当用户选择“选项3”和“3选项”要做的变化？有没有设置模式？ –

@HimanshuVohra嗨，如果用户选择“选项3”，那么当前显示“增益100个电子邮件”更改为“增益900个电子邮件”和“每天最大的电子邮件：3”子弹点更改为“每天最大的电子邮件： 15" 。而如果用户选择“选项4”，则该项目符号点当前显示“增益100名的电子邮件”改变为“增益1500名的电子邮件”，“每天最多电子邮件：3”和更改为“每天最大电子邮件：20” 。谢谢！ – Morgari

你可以试试下面的代码。我点击了功能更新了您的文档。希望你得到你想要的功能：

$(document).on('click', function (e) { 
    var target = $(e.target).closest(".btn-select"); 
    if (!target.length) { 
     $(".btn-select").removeClass("active").find("ul").hide(); 
    } 
    if (!$(e.target).hasClass('btn-select-value') && $(e.target).parents('.btn-select-light').length > 0) { 
     var gainEmailTxt = "", maxEmailPerDayTxt = ""; 
     switch ($(e.target).text()) { 
      case "Option 1": 
       gainEmailTxt = "Gain 300 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 6"; 
       break; 
      case "Option 2": 
       gainEmailTxt = "Gain 600 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 10"; 
       break; 
      case "Option 3": 
       gainEmailTxt = "Gain 900 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 15"; 
       break; 
      case "Option 4": 
       gainEmailTxt = "Gain 1500 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 20"; 
       break; 
      default: 
       gainEmailTxt = "Gain 100 Emails"; 
       maxEmailPerDayTxt = "Max Emails per Day: 3"; 
       break; 
     } 

     $('.table-premium td:eq(0) p').text(gainEmailTxt); 
     $('.table-premium td:eq(3) p').text(maxEmailPerDayTxt); 
    } 
});

来源

2017-01-05 05:35:38

谢谢，但不幸的是，什么也没有工作（包括下拉菜单了）https://jsfiddle.net/mzdu2v44/ – Morgari

嘿，你只需要替换文件上的点击功能不是整个脚本。 –

对不起，我的坏：D当然，现在一切都很好。非常好的解决方案，非常感谢！ – Morgari

这将hopely工作（一个纯JavaScript解决方案）：

var cells = document.querySelectorAll('tr td p'); 
function opt1() { 
    rows[0].innerHTML = "Gain 300 Emails"; 
    rows[3].innerHTML = "Max Emails per Day: 6"; 
} 

function opt2() { 
    rows[0].innerHTML = "Gain 600 Emails"; 
    rows[3].innerHTML = "Max Emails per Day: 10"; 
} 

function opt3() { 
    rows[0].innerHTML = "Gain 900 Emails"; 
    rows[3].innerHTML = "Max Emails per Day: 15"; 
} 

function opt4() { 
    rows[0].innerHTML = "Gain 1500 Emails"; 
    rows[3].innerHTML = "Max Emails per Day: 20"; 
} 

var options document.querySelectorAll('.btn-select-arrow ul li'); 
options[0].onclick = opt1(): 
options[1].onclick = opt2(): 
options[2].onclick = opt3(): 
options[3].onclick = opt4():

来源

2017-01-05 05:13:30

谢谢。我应该在哪里放这个代码？ – Morgari

要么普它在''' –

表内容的变化取决于下拉选项

回答

相关问题