मैं अपनी समस्या का वर्णन करने की पूरी कोशिश करूंगा। इस समुदाय ने पहले भी मेरी मदद की है, इसलिए मुझे उम्मीद है कि कोई मेरी मदद करने के लिए एक बार फिर से दयालु होगा। मैं वास्तव में jQuery के बारे में ज्यादा नहीं जानता।

हम आसान डिजिटल डाउनलोड का उपयोग करके एक वर्डप्रेस साइट स्थापित कर रहे हैं, इसके कारण हमारे पास कुछ प्रतिबंध हैं, जैसे HTML को बदलने में सक्षम नहीं होना, लेकिन हम एक पृष्ठ पर JQuery तत्व जोड़ सकते हैं।

यह एक श्रेणी चयन प्रणाली के लिए है जहां एक उपयोगकर्ता केवल 1 मूल श्रेणी और उस माता-पिता के तहत कई उप श्रेणियों का चयन करने में सक्षम होना चाहिए।

मैं निम्नलिखित परिदृश्य के लिए एक jQuery समाधान की तलाश में हूं।

हमारे पास 5, संभावित रूप से 6, "श्रेणियां" हैं। इन श्रेणियों में यूएल द्वारा प्रतिनिधित्व उप श्रेणियां हैं। डिफ़ॉल्ट रूप से उप श्रेणियों को छिपाया जाना चाहिए। जब आप मूल श्रेणी पर क्लिक करते हैं तो उसे नीचे उप श्रेणियां प्रदर्शित करनी चाहिए। यदि आप किसी भी समय समान मूल श्रेणी पर क्लिक करते हैं, तो उसे सभी बच्चों को अचयनित करना चाहिए और उन्हें फिर से छिपा देना चाहिए।

मैं यह भी चाहता हूं कि किसी भी बिंदु पर केवल 1 मूल श्रेणी का चयन किया जाए।

मैं आपको एक परिदृश्य देता हूं। आप कैट ए पर क्लिक करते हैं, यह फैलता है और 4 उप श्रेणियां दिखाता है। आप उन उपश्रेणियों में से 2 पर क्लिक करें। आप अपना विचार बदलते हैं और इसके बजाय कैट बी पर क्लिक करते हैं। इसके बाद कैट ए की उप श्रेणियों को छिपाना चाहिए और बच्चों के साथ-साथ कैट ए के माता-पिता को भी अचयनित करना चाहिए।

बस अगर मैंने इसे पर्याप्त रूप से स्पष्ट नहीं किया है, तो यह महत्वपूर्ण है कि आप कभी भी मूल श्रेणी के बिना उप श्रेणी का चयन नहीं कर सकते।

मैंने किसी अन्य धागे में मिली किसी चीज़ के साथ एक बुनियादी पहेली बनाई है। बस दिखाने और छिपाने के लिए है (हालांकि मैंने अभी तक छिपाने के लिए कोई वर्ग नहीं जोड़ा है) इसमें एचटीएमएल संरचना है जिसका हम उपयोग कर रहे हैं।

एक और मुद्दा यह है कि सभी अभिभावक श्रेणियां बच्चों (.बच्चों) के लिए एक ही कक्षा का उपयोग करती हैं।

$('#in-download_category-156').click(function() {
  $(".children").toggle(this.checked);
});

बेला

मुझे पता है कि यह एक बड़ा सवाल है, इसलिए मैं आपकी मदद करने के लिए किसी भी मदद की सराहना करता हूं! शुक्रिया

0
MjTheHunter 24 जिंदा 2019, 16:56

1 उत्तर

सबसे बढ़िया उत्तर

इसे आज़माएं (मैंने नीचे कुछ नोट्स जोड़े हैं):

$('.fes-category-checklist > li > input[name^="download_category"]').change(function() {
  $(this)
    .closest('ul')
    .find('input[name^="download_category"]')
    .not(this)
    .prop('checked', false);
});
ul {
  list-style: none;
  padding-left: 20px;
}

ul.fes-category-checklist > li > input[name^="download_category"]:not(:checked) ~ ul.children {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="fes-category-checklist">
  <li id="download_category-156">
    <input value="156" type="checkbox" name="download_category[]" id="in-download_category-156" />
    <label for="in-download_category-156" class="selectit">cat a</label>

    <ul class="children">
      <li id="download_category-161"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> cat a-1</label></li>

      <li id="download_category-162"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> cat a-2</label></li>

      <li id="download_category-163"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> cat a-3</label></li>

      <li id="download_category-183"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> cat a-4</label></li>
    </ul>
  </li>

  <li id="download_category-160">
    <input value="160" type="checkbox" name="download_category[]" id="in-download_category-160" />
    <label for="in-download_category-160" class="selectit">cat b</label>

    <ul class="children">
      <li id="download_category-198"><label class="selectit"><input value="198" type="checkbox" name="download_category[]" id="in-download_category-198"> cat b-1</label></li>

      <li id="download_category-199"><label class="selectit"><input value="199" type="checkbox" name="download_category[]" id="in-download_category-199"> cat b-2</label></li>

      <li id="download_category-200"><label class="selectit"><input value="200" type="checkbox" name="download_category[]" id="in-download_category-200"> cat b-3</label></li>

      <li id="download_category-201"><label class="selectit"><input value="201" type="checkbox" name="download_category[]" id="in-download_category-201"> cat b-4</label></li>
    </ul>
  </li>

  <li id="download_category-155">
    <input value="155" type="checkbox" name="download_category[]" id="in-download_category-155" />
    <label for="in-download_category-155" class="selectit">cat c</label>

    <ul class="children">
      <li id="download_category-164"><label class="selectit"><input value="164" type="checkbox" name="download_category[]" id="in-download_category-164"> cat c-1</label></li>

      <li id="download_category-165"><label class="selectit"><input value="165" type="checkbox" name="download_category[]" id="in-download_category-165"> cat c-2</label></li>

      <li id="download_category-166"><label class="selectit"><input value="166" type="checkbox" name="download_category[]" id="in-download_category-166"> cat c-3</label></li>

      <li id="download_category-169"><label class="selectit"><input value="169" type="checkbox" name="download_category[]" id="in-download_category-169"> cat c-4</label></li>

      <li id="download_category-171"><label class="selectit"><input value="171" type="checkbox" name="download_category[]" id="in-download_category-171"> cat c-5</label></li>

      <li id="download_category-168"><label class="selectit"><input value="168" type="checkbox" name="download_category[]" id="in-download_category-168"> cat c-6</label></li>

      <li id="download_category-170"><label class="selectit"><input value="170" type="checkbox" name="download_category[]" id="in-download_category-170"> cat c-7</label></li>

      <li id="download_category-202"><label class="selectit"><input value="202" type="checkbox" name="download_category[]" id="in-download_category-202"> cat c-8</label></li>
    </ul>
  </li>

  <li id="download_category-157">
    <input value="157" type="checkbox" name="download_category[]" id="in-download_category-157" />
    <label class="selectit" for="in-download_category-157">cat d</label>
  </li>
</ul>

ध्यान दें कि मैं पहले चेकबॉक्स समूहों को से बाहर ले जा रहा हूं label और उन पर एक for विशेषता असाइन करना।

<label> को एक <input> तत्व के साथ जोड़ने के लिए, जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है, आपको <input> को एक id विशेषता देनी होगी। <label> को तब एक for विशेषता की आवश्यकता होती है जिसका मान इनपुट के id के समान हो।

साथ ही कुछ CSS ट्रिक का उपयोग करना जो आपको छद्म-वर्ग: :checked स्थिति। चूँकि हमारे ul.children, चेकबॉक्स के तत्काल सहोदर नहीं हैं, इसके बजाय चाइल्ड कॉम्बिनेटर हमें सामान्य सहोदर का उपयोग करने की आवश्यकता है कॉम्बिनेटर उन्हें स्टाइल करने के लिए लक्षित करने के लिए। यह इस बात में मदद करता है कि उप-श्रेणी यूएल की दृश्यता स्थिति को चालू करने के लिए आपको किसी जावास्क्रिप्ट की आवश्यकता नहीं है।


संपादित करता

ठीक है, इसलिए चूंकि HTML संरचना को अक्षुण्ण रहना है और तथ्य यह है कि माता-पिता और बच्चे के तत्व समान कक्षाओं को साझा कर रहे हैं, हमारे पास जंजीर चाइल्ड कॉम्बिनेटर का उपयोग करने के अलावा और कोई विकल्प नहीं है, क्योंकि हम नहीं चाहते कि किसी भी बच्चे को माता-पिता के समान शैली मिले। जब तक आप माता-पिता को बच्चों से अलग करने के लिए कुछ विशेष वर्ग या विशेषता (जैसे <li id="download_category-156" class="parent-category">) निर्दिष्ट करने में सक्षम नहीं हैं।

यह थोड़ा बदसूरत (लंबा चयनकर्ता) दिखाई देगा, लेकिन इसे समस्या का समाधान करना चाहिए:

$('.fes-category-checklist > li > label.selectit > input[name^="download_category"]').change(function() {
  var categoryId = this.value;
  var $checkbox = $(this);

  $('.fes-category-checklist')
    .find('li[id^="download_category"]')
    .attr('data-open', function(index, value) {
      return this.id.endsWith(categoryId) && value === 'false';
    });

  $checkbox
    .closest('ul')
    .find('input[name^="download_category"]')
    .not(this)
    .prop('checked', false);
});

$(document).ready(function() {
  $('ul.fes-category-checklist')
    .find('> li[id^="download_category"]')
    .attr('data-open', false)
    .fadeIn();
});
ul {
  list-style: none;
  padding-left: 20px;
}

ul.fes-category-checklist > li {
  display: none;
}

li[data-open="false"] > ul.children {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<ul class="fes-category-checklist">
  <li id="download_category-156">
    <label class="selectit">
      <input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> cat a
    </label>
    <ul class="children">
      <li id="download_category-161"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> cat a-1</label></li>

      <li id="download_category-162"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> cat a-2</label></li>

      <li id="download_category-163"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> cat a-3</label></li>

      <li id="download_category-183"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> cat a-4</label></li>
    </ul>
  </li>

  <li id="download_category-160">
    <label class="selectit">
      <input value="160" type="checkbox" name="download_category[]" id="in-download_category-160"> cat b
    </label>
    <ul class="children">
      <li id="download_category-198"><label class="selectit"><input value="198" type="checkbox" name="download_category[]" id="in-download_category-198"> cat b-1</label></li>

      <li id="download_category-199"><label class="selectit"><input value="199" type="checkbox" name="download_category[]" id="in-download_category-199"> cat b-2</label></li>

      <li id="download_category-200"><label class="selectit"><input value="200" type="checkbox" name="download_category[]" id="in-download_category-200"> cat b-3</label></li>

      <li id="download_category-201"><label class="selectit"><input value="201" type="checkbox" name="download_category[]" id="in-download_category-201"> cat b-4</label></li>
    </ul>
  </li>

  <li id="download_category-155">
    <label class="selectit">
      <input value="155" type="checkbox" name="download_category[]" id="in-download_category-155"> cat c
    </label>
    <ul class="children">
      <li id="download_category-164"><label class="selectit"><input value="164" type="checkbox" name="download_category[]" id="in-download_category-164"> cat c-1</label></li>

      <li id="download_category-165"><label class="selectit"><input value="165" type="checkbox" name="download_category[]" id="in-download_category-165"> cat c-2</label></li>

      <li id="download_category-166"><label class="selectit"><input value="166" type="checkbox" name="download_category[]" id="in-download_category-166"> cat c-3</label></li>

      <li id="download_category-169"><label class="selectit"><input value="169" type="checkbox" name="download_category[]" id="in-download_category-169"> cat c-4</label></li>

      <li id="download_category-171"><label class="selectit"><input value="171" type="checkbox" name="download_category[]" id="in-download_category-171"> cat c-5</label></li>

      <li id="download_category-168"><label class="selectit"><input value="168" type="checkbox" name="download_category[]" id="in-download_category-168"> cat c-6</label></li>

      <li id="download_category-170"><label class="selectit"><input value="170" type="checkbox" name="download_category[]" id="in-download_category-170"> cat c-7</label></li>

      <li id="download_category-202"><label class="selectit"><input value="202" type="checkbox" name="download_category[]" id="in-download_category-202"> cat c-8</label></li>
    </ul>
  </li>

  <li id="download_category-157">
    <label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> cat d</label>
  </li>
</ul>

बच्चों की दृश्यता की प्रारंभिक स्थिति जोड़ना

निम्नलिखित पंक्तियाँ उन्हें प्रारंभ में hidden पर सेट करेंगी। यदि आप समायोजित करना चाहते हैं तो आप दूसरे तर्क में फ़ंक्शन भी पास कर सकते हैं राज्यों को व्यक्तिगत रूप से।

$(document).ready(function() {
  $('ul.fes-category-checklist')
    .find('> li[id^="download_category"]')
    .attr('data-open', false)
    .fadeIn();
});

साथ ही, यदि आप बच्चों को ULs को टॉगल करते समय कुछ फैंसी प्रभाव देना चाहते हैं, तो मेरी अन्य पोस्ट देखें कि आप इसे jQuery के साथ कैसे कर सकते हैं slideToggle.

उम्मीद है की वो मदद करदे!

0
Yom T. 24 जिंदा 2019, 21:57