jquery - 从单击 div 中选择填充选定值并应用类

Question

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

当用户单击相关表时，我可以选择填充正确的值，但我无法将类 (.plan_chosen) 应用于表，因此很明显每次选择一个时都会选择哪个.

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

$(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 () {
    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 类
• 您需要有一个更改处理程序来执行相同的操作