的jQuery

    $(document).ready(function(){      
      $('.offersidemenu li').click(function(){

      var sidemenu = $(this).text();
      alert(sidemenu); // Electronics is the output
     $('.' + sidemenu).css('border','5px solid green'); // not working 
   /* $('.Electronics').css('border','5px solid green'); Working  */
       });
    });

HTML

<div class="color-shape Electronics Emi small rectangle">
----MY Content---
</div>

Answer 1

如果有一些额外的空间，它将成为一个问题。因此在将空格用作选择器之前修剪空格

$('.offersidemenu li').click(function () {
    var sidemenu = $(this).text().trim();
    alert(sidemenu); // Electronics is the output
    $('.' + sidemenu).css('border', '5px solid green'); 
});

修改

FrédéricHamidi建议

最好使用$.trim($(this).text())来支持IE的下层病毒

Answer 2

HTML和代码都存在许多问题。

如上所述，您可能会遇到text()返回不需要的空格的问题。由于您拥有不匹配的DIV代码，因此您的HTML也无效，并且您不应该使用锚点LI包围DIV。 LI的父级必须是UL或OL。

不是依赖文本，修剪它（并修复任何其他问题），而是在元素中添加data-属性。这是一种更可靠和可维护的参考其他元素的方式。

e.g。 HTML

<ul class="offersidemenu">
    <li data-link=".Electronics">
        <div style="display: block; cursor: pointer;">
            <div style="border-bottom: 1px solid #F0F0F0;padding: 5px;"> <a href="#">   <span>All Offers</span> </a> 
            </div>
        </div>
    </li>
</ul>

如果该类实际上是动态设置的（正如您在标题/问题中所述），那么您需要使用委托的事件处理程序：

// Shortcut for $(document).ready(
$(function () {
    $(document).on('click', '.offersidemenu li', function (e) {
        // Stop the link moving to the top of the page
        e.preventDefault();
        // Fetch the data-link attribute
        var sidemenu = $(this).data("link");
        $(sidemenu).css('border', '5px solid green');
    });
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/rcbk8zs5/

委托事件处理程序通过侦听冒泡到所需元素的不变祖先的事件来工作。越接近越好（效率），但document是默认值（如果没有更接近的话）。它然后应用jQuery选择器。它然后将该函数应用于导致事件的任何匹配元素。

委派处理程序的优点是元素可能尚不存在。

Jquery动态类选择器不工作

的jQuery

HTML

2 个答案: