Question

我有一个包含三个选项的定价表和一个用三个价格选项填充的选择下拉列表 - 要选择一个计划，用户可以从选择列表中选择或单击相关的表格选项。

当用户点击相关表时，我可以选择填充正确的值，但是我不能将一个类（.plan_chosen）应用于表，因此很明显每次选择一个类时都会选择一个

此外，如果有人直接从选择中选择，那么我怎样才能将相同的类应用到表中，以便再次知道哪个被选中？

$(function() {
    $('.pricing-table').click(function() {
        var choice=$(this).attr('id');
        $('#plan').val(choice);
        $('#choice').addClass('plan_chosen');
    });
});

<div class="pt">
    <ul class="pricing-table green" id="Core">
        <li class="plan">Core</li>
        <li class="sign-up"><a href="#">Select</a></li>
    </ul>

    <ul class="pricing-table green" id="Professional">
        <li class="extra-info">POPULAR</li>
        <li class="sign-up"><a href="#">Select</a></li>
    </ul>

    <ul class="pricing-table green" id="Enterprise">
        <li class="plan">Enterprise</li>
        <li class="sign-up"><a href="#">Select</a></li>
    </ul>       
</div>

<div class="select-group focus">
    <label>Plan</label>
    <div class="select">
        <select name="plan" id="plan" class="req">
            <option>Choose a plan</option>
            <option>Core</option>
            <option>Professional</option>
            <option>Enterprise</option>
        </select>
    </div>  
</div>

Fiddle

Answer 1

将脚本更改为

$(function() {
    $('.pricing-table').click(function() {
        var choice=$(this).attr('id');
        $('#plan').val(choice);
        $('.pt ul').removeClass('plan_chosen');
        $('#'+choice).addClass('plan_chosen');
    });

    $('#plan').change(function(){
        $('.pt ul').removeClass('plan_chosen');
        $('#'+ $(this).find(":selected").text()).addClass('plan_chosen');
    });
});

这是 Fiddle 。

您必须将$('#choice')更改为$('#'+choice)
您必须从prevoiusly点击的元素中删除类

Answer 2

尝试

$(function () {
    function select(choice) {
        $('#plan').val(choice);
        $tables.removeClass('plan_chosen');
        $('#' + choice).addClass('plan_chosen');
    }

    var $tables = $('.pricing-table').click(function () {
        var choice = this.id;
        select(this.id)
    });
    $('#plan').change(function () {
        select(this.value)
    })
});

演示：Fiddle

您需要使用choice作为变量并将其用于字符串连接
您需要从之前选择的元素

plan_chosen

您需要为选择执行相同的更改处理程序

在select中单击div并选择一个类来填充选定的值

2 个答案: