Question

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

最终列表中有少量标记，这些标记位于下拉列表的右侧，因此我无法使用标准选择和选项。

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

原谅我没有最优雅的解决方案。或许我过度复杂化需求。

所以你知道我读过的课程，并在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();
            });
        });

Answer 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

jquery从列表中选择Class值

1 个答案:

演示 here