如果元素具有类

Question

我列出了一个包含元素的列表，这些元素已经被添加到了＆＃39;如果点击。该元素应转移到表格中。因此，我制作了一个复选框列表，其中包含与＆＃39; li＆＃39;相同的类。从列表中。

我写了一个jQuery脚本，如果＆＃39; li＆＃39;单击（hasClass），然后正确的复选框应该具有“检查＆＃39;”属性。但它不能正常工作。不知道我做错了什么......

HTML：

<div class="container">
                    <div class="row row-centered konf-wrapper-1">
                        <div class="col-md-4 label-wrap">
                            <h1 class="header-label">Konzeption</h1>
                            <ul class="li-wrap">
                                <li class="added haken">Kommunikationsstrategie</li>
                                <li class="0 hide-me add-btn point">Zielgruppendefinition</li>
                            </ul>
                        </div>

                        <div class="col-md-4 label-wrap">
                            <h1 class="header-label">Kommunikationsmaßnahmen</h1>
                            <ul class="li-wrap">
                                <li class="1 hide-me add-btn point">Namensfindung & Logoentwicklung</li>
                                <li class="2 hide-me add-btn point">Exposé</li>
                                <li class="3 hide-me add-btn point">Textdesign</li>
                                <li class="4 hide-me add-btn point">Anzeigenkampagnen</li>
                                <li class="5 hide-me add-btn point">Außenwerbung</li>
                                <li class="6 hide-me add-btn point">Bautafelgestaltung</li>
                            </ul>
                        </div>
                    </div>

                    <div class="row row-centered konf-wrapper-2 label-wrap">
                        <div class="col-md-4 label-wrap">
                            <h1 class="header-label">Online-Marketing</h1>
                            <ul class="li-wrap">
                                <li class="8 hide-me add-btn point">Website</li>
                                <li class="9 hide-me add-btn point">Social Media</li>
                                <li class="10 hide-me add-btn point">Digitale Präsentation</li>
                            </ul>
                        </div>

                        <div class="col-md-4 label-wrap">
                            <h1 class="header-label">Virtuelle Welten</h1>
                            <ul class="li-wrap">
                                <li class="11 hide-me add-btn point">Innenvisualisierung</li>
                                <li class="11 hide-me add-btn point">Außenvisualisierung</li>
                                <li class="12 hide-me add-btn point">Virtuelle Begehung</li>
                                <li class="13 hide-me add-btn point">Augmented Reality</li>
                            </ul>
                        </div>
                    </div>
                     <button type="button" class="btn btn-primary added-btn" title="Zur Übersicht." id="gesamt-weiter" >Zum Formular</button>



                 </div> 

复选框：

<div class="">
      <ul class="checker-wrap">
      <li><input type="checkbox" id="0" value="Zielgruppendefinition" class="0 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="2" value="Exposé" class="2 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="3" value="Textdesign" class="3 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="4" value="Anzeigenkampagnen" class="4 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="5" value="Außenwerbung" class="5 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="6" value="Bautafelgestaltung" class="6 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="8" value="Website" class="8 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="9" value="Social Media" class="9 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="10" value="Digitale Präsentation" class="10 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="11" value="Visualisierungen" class="11 checker" name="checkbox-group[]"></li>
     <li><input type="checkbox" id="12" value="Virtuelle Begehung" class="12 checker" name="checkbox-group[]"></li>
     <li><input type="checkbox" id="13" value="Augmented Reality" class="13 checker" name="checkbox-group[]"></li>
    </ul>
    </div>

jQuery的：

var $check = $(".checker-wrap");
$(".add-btn").click(function() {
        var $li = $(this).toggleClass("hide-me added haken");

        var li_class = $(this).attr('class').split(" ");
        var $wrap = $li.closest('.label-wrap');
        // trigger checkbox for form
        if (($li).hasClass("added")) {
            $check.find('.'+li_class[0]).addAttr('checked');
        } else {
            $check.find('.'+li_class[0]).removeAttr('checked');
        }

        $wrap.find('h1').toggleClass('top-added', $wrap.find('.added').length > 0);
        });

所以问题是，我必须更改，如果li添加了类，则会触发复选框，如果没有，则应取消选中该复选框...

Answer 1

使用$check.find(class_check).prop('checked', 'checked');代替.addAttr()

var $check = $(".checker-wrap");
$(".add-btn").click(function() {
        var $li = $(this).toggleClass("hide-me added haken");

        var li_class = $(this).attr('class').split(" ");
        var $wrap = $li.closest('.label-wrap');
        // trigger checkbox for form
         $check.find('.'+li_class[0]).trigger('click');
        if (($li).hasClass("added")) {
        var class_check = '.' + li_class[0]; 
            $check.find(class_check).prop('checked', 'checked');
        } else {
            $check.find('.'+li_class[0]).prop('checked', false);
        }

        $wrap.find('h1').toggleClass('top-added', $wrap.find('.added').length > 0);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
                    <div class="row row-centered konf-wrapper-1">
                        <div class="col-md-4 label-wrap">
                            <h1 class="header-label">Konzeption</h1>
                            <ul class="li-wrap">
                                <li class="added haken">Kommunikationsstrategie</li>
                                <li class="0 hide-me add-btn point">Zielgruppendefinition</li>
                            </ul>
                        </div>

                        <div class="col-md-4 label-wrap">
                            <h1 class="header-label">Kommunikationsmaßnahmen</h1>
                            <ul class="li-wrap">
                                <li class="1 hide-me add-btn point">Namensfindung & Logoentwicklung</li>
                                <li class="2 hide-me add-btn point">Exposé</li>
                                <li class="3 hide-me add-btn point">Textdesign</li>
                                <li class="4 hide-me add-btn point">Anzeigenkampagnen</li>
                                <li class="5 hide-me add-btn point">Außenwerbung</li>
                                <li class="6 hide-me add-btn point">Bautafelgestaltung</li>
                            </ul>
                        </div>
                    </div>

                    <div class="row row-centered konf-wrapper-2 label-wrap">
                        <div class="col-md-4 label-wrap">
                            <h1 class="header-label">Online-Marketing</h1>
                            <ul class="li-wrap">
                                <li class="8 hide-me add-btn point">Website</li>
                                <li class="9 hide-me add-btn point">Social Media</li>
                                <li class="10 hide-me add-btn point">Digitale Präsentation</li>
                            </ul>
                        </div>

                        <div class="col-md-4 label-wrap">
                            <h1 class="header-label">Virtuelle Welten</h1>
                            <ul class="li-wrap">
                                <li class="11 hide-me add-btn point">Innenvisualisierung</li>
                                <li class="11 hide-me add-btn point">Außenvisualisierung</li>
                                <li class="12 hide-me add-btn point">Virtuelle Begehung</li>
                                <li class="13 hide-me add-btn point">Augmented Reality</li>
                            </ul>
                        </div>
                    </div>
                     <button type="button" class="btn btn-primary added-btn" title="Zur Übersicht." id="gesamt-weiter" >Zum Formular</button>



                 </div> 



<div class="">
      <ul class="checker-wrap">
      <li><input type="checkbox" id="0" value="Zielgruppendefinition" class="0 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="2" value="Exposé" class="2 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="3" value="Textdesign" class="3 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="4" value="Anzeigenkampagnen" class="4 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="5" value="Außenwerbung" class="5 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="6" value="Bautafelgestaltung" class="6 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="8" value="Website" class="8 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="9" value="Social Media" class="9 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="10" value="Digitale Präsentation" class="10 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="11" value="Visualisierungen" class="11 checker" name="checkbox-group[]"></li>
     <li><input type="checkbox" id="12" value="Virtuelle Begehung" class="12 checker" name="checkbox-group[]"></li>
     <li><input type="checkbox" id="13" value="Augmented Reality" class="13 checker" name="checkbox-group[]"></li>
    </ul>
    </div>


<div class="">
      <ul class="checker-wrap">
      <li><input type="checkbox" id="0" value="Zielgruppendefinition" class="0 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="2" value="Exposé" class="2 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="3" value="Textdesign" class="3 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="4" value="Anzeigenkampagnen" class="4 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="5" value="Außenwerbung" class="5 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="6" value="Bautafelgestaltung" class="6 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="8" value="Website" class="8 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="9" value="Social Media" class="9 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="10" value="Digitale Präsentation" class="10 checker" name="checkbox-group[]"></li>
      <li><input type="checkbox" id="11" value="Visualisierungen" class="11 checker" name="checkbox-group[]"></li>
     <li><input type="checkbox" id="12" value="Virtuelle Begehung" class="12 checker" name="checkbox-group[]"></li>
     <li><input type="checkbox" id="13" value="Augmented Reality" class="13 checker" name="checkbox-group[]"></li>
    </ul>
    </div>