Question

我目前正在开发一个客户端项目，我有一个属性列表。像这样：

<div class="property">
<h2>Property Name</h2>
<span>0 – 1,500 sq ft</span>
</div>

每个房产都有'可用空间（平方英尺）'。我还有一个包含所有可用空格选项的选择框，如下所示：

<select id="selectList" name="field_53c53945dcb87">
    <option value="1500">0 – 1,500 sq ft</option>
    <option value="3000">1,500 – 3,000 sq ft</option>
    <option value="5000">3,000 – 5,000 sq ft</option>
    <option value="10000">5,000 – 10,000 sq ft</option>
    <option value="20000">10,000 – 20,000 sq ft</option>
</select>

我想在具有当前所选值的所有属性中添加一个“已选择”类。到目前为止我的jQuery是：

(function($){
    $(document).ready(function(){
        // Create a variable with current selected item
        var currentSelection = $('#selectList :selected').val();
        // Find all elements containing variable
        // Add class to all elements containing variable
        $('div:contains('" + currentSelection + "')').addClass('selected');
    });
})(jQuery);

为什么这个目前没有将类添加到具有所选值的div中的任何想法？

提前致谢，马克

更新

@ pillyonecan的JS小提琴在这里显示了我正在寻找的答案。谢谢！ http://jsfiddle.net/DMFLY/3

Answer 1

在我看来，你的div不包含值。你正在寻找价值＆＃34; 1500＆＃34;当你的价值实际上是＆＃34; 1,500＆＃34; - 我的建议是采用其中一个值来匹配另一个：）

http://jsfiddle.net/PDE8t/ - 更新版本，代码如下......

 <select id="selectList" name="field_53c53945dcb87">
      <option value="1,500">0 – 1,500 sq ft</option>
 </select>

Answer 2

第一个问题是，在尝试连接currentSelection变量时，你的引号是错误的：

$('div:contains("' + currentSelection + '")').addClass('selected');

第二个是所选选项的值与div中的文本匹配，因此上面的选择器永远不会返回一个元素。正如您的代码当前，您可以使用所选选项的文本：

var currentSelection = $('#selectList option:selected').text();

至于在选择其他选项时删除课程，只需将change处理程序附加到选择中，然后让它为您完成工作：

$('#selectList').on('change', function() {
    var selected = $(this).find('option:selected').text(); 

    $('.property').removeClass('selected')
                  .filter(':contains("' + selected + '")').addClass('selected');
}).change();

根据选择值中的匹配字段将类添加到元素

更新

2 个答案:

Here's a fiddle