從點擊div中填充選定的值並應用類

我有一個定價表，其中包含三個選項和一個選擇下拉列表，其中填充了三個價格選項 - 要選擇一個計劃，用戶可以從選擇列表中選擇或單擊相關的表格選項。從點擊div中填充選定的值並應用類

在用戶點擊相關表格的時候，我可以選擇填充正確的值，但是我不能將一個類（.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

來源

2014-03-30 bhttoan

刪除類嘗試

$(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類，你需要有選擇的改變處理程序，將做同樣的

來源

2014-03-30 15:53:25

選擇此作爲正確的答案，因爲它解決了這兩個要求 - 謝謝 – bhttoan

更改腳本

$(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點擊的元素

來源

2014-03-30 15:52:50

從點擊div中填充選定的值並應用類

回答

相關問題