表内容更改取决于下拉选项

时间：2017-01-05 04:56:40

标签： javascript jquery html css twitter-bootstrap

我有通过Bootstrap开发的定价表和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 -->

2 个答案:

答案 0 :(得分：1)

这将有希望工作（一个普通的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():

答案 1 :(得分：1)

您可以尝试以下代码。我已经更新了有关点击功能的文档。希望你得到你想要的东西：

$(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);
    }
});
相关问题
最新问题