jquery从列表中选择类值答案

【问题标题】：jquery select Class value from listjquery从列表中选择类值
【发布时间】：2013-08-12 19:42:34
【问题描述】：

我对 jquery 的了解非常有限，我希望能够从下拉选择中读取 Class 值。

最后的列表有一些标记在下拉右侧的标签，所以我不能使用标准的选择和选项。

我创建了这个小提琴，你可以尝试读取值。

http://jsfiddle.net/ZLvSN/1/

请原谅我没有最优雅的解决方案。或者我把需求复杂化了。

所以你知道我读过的课程，我将我的语言存储在一个 cookie 中。

感谢大家的帮助。

这是我的简单菜单列表。

<div id="language" >
   <dl class="dropdown">
        <dt><a href="#"><span>Change Language. </span></a></dt>
     <dd>
       <ul>
         <li><a href="#">English<span class="flag-uk"></span></a></li>
         <li><a href="#">English US<span class="flag-us"></span></a></li>
         <li><a href="#">Français<span class="flag-fr"></span></a></li>
         <li><a href="#">Deutsch<span class="flag-de"></span></a></li>
         <li><a href="#">Español<span class="flag-es"></span></a></li>
         <li><a href="#">Italiano<span class="flag-it"></span></a></li>
         <li><a href="#">Polski<span class="flag-pl"></span></a></li>
         <li><a href="#">Русский<span class="flag-ru"></span></a></li>
         <li><a href="#">Português<span class="flag-br"></span></a></li>
         </ul>
       </dd>
   </dl>    
</div>

     <span id="result"></span>

还有 jquery

       $(document).ready(function() {

            $(".dropdown dt a").click(function()  { $(".dropdown dd ul").toggle(); });               
            $(".dropdown dd ul li a").click(function() {
                var $this= $(this),
                    text= $this.html(),
                    text2= $this.span,
                    text3= $this.a;

                console.log($this); // debug test
                console.log(text); //debug test
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + text3);
            });

   $(document).on('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });
        });

【问题讨论】：

我的答案是您想要的吗？

标签： jquery attr

【解决方案1】：

试试这个：

$(document).ready(function () {

        $(".dropdown dt a").click(function () {
            $(".dropdown dd ul").toggle();
        });
        $(".dropdown dd ul li a").click(function () {
            var $this = $(this),
                text = $this.text(),
                text2 = $this.span,
                text3 = $this.a,
                text4 = $this.find('span').prop('class');

            console.log($this);
            console.log(text);
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
            $("#result").html("Selected value is: " + text+" and class is: "+text4);
        });

        $(document).bind('click', function (e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
        });
    });

演示here

它给出的结果是：

text = $this.text()  // this gets the text Ex. Deutsch
text4 = $this.find('span').prop('class'); // this looks after the next <span> and gets  its class Ex. flag-de

【讨论】：