Как написать универсальный метод в JQuery - PullRequest
Новая
       2

Как написать универсальный метод в JQuery

0 голосов
/ 23 октября 2019

У меня есть сценарий, как несколько разделов имеют схожую функциональность, как определено ниже 

<html lang="en"> <head>
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <script type="text/javascript">
        $(function(){
            $("#fav_countries_checkboxAll_option").click(function(){  
                $(".fav-color").prop('checked', 'checked');
            });
                    $("#fav_sports_checkboxAll_option").click(function(){  
                $(".fav-sport").prop('checked', 'checked');
            });

        });
        </script> </head> <body>   <h3>Favorite Countries</h3>   <a id="fav_countries_checkboxAll_option"
    href="javascript:void(0);">Select all</a>   <input type="checkbox"
    class="fav-color" name="country1" value="India">India<br/>   <input
    type="checkbox" class="fav-color" name="country2"
    value="Singapore">Singapore<br/>   <input type="checkbox"
    class="fav-color" name="country3" value="Australia">Australia<br/>  
    <input type="checkbox" class="fav-color" name="country4"
    value="Ameria">Ameria<br/>   <br/>
         <h3>Favorite Sports</h3>   <a id="fav_sports_checkboxAll_option" href="javascript:void(0);">Select
    all</a>   <input type="checkbox" class="fav-sport" name="sport1"
    value="Cricket">Cricket<br/>   <input type="checkbox"
    class="fav-sport" name="sport2" value="Tennis">Tennis<br/>   <input
    type="checkbox" class="fav-sport" name="sport3"
    value="VolleyBall">VolleyBall<br/>    </body> </html>

Мне кажется, что я дублирую код для каждого раздела. Я хочу иметь общий метод, который будет обрабатывать сценарии. Как этого добиться в jquery.

Ответы [ 3 ]

2 голосов
/ 23 октября 2019

Вы можете добиться этого, используя селектор класса, как показано ниже 

 $(".checkAll").click(function(){  
          var relatedCtrls = $(this).attr('related-ctrls')
          if(relatedCtrls)
            $('.'+relatedCtrls).prop('checked', 'checked');
       });

<a id="fav_countries_checkboxAll_option"
    href="javascript:void(0);" class="checkAll" related-ctrls="fav-color">Select all</a> 


<a id="fav_countries_checkboxAll_option"
        href="javascript:void(0);" class="checkAll" related-ctrls="fav-sport">Select all</a>

Сгруппируйте все свои отметки все <a> тег в одном классе. Добавьте пользовательский атрибут для поддержки имени класса связанных элементов управления, который поможет вам определить набор связанных элементов управления для этого конкретного тега <a>.

0 голосов
/ 23 октября 2019

Очевидно, что есть много способов достичь ваших требований.

  • При группировке рассмотрите возможность присвоения вашему флажку того же name. Это не обязательно, но когда вы пытаетесь получить список всех отмеченных флажков в определенной категории, это становится полезным. В вашем случае FavoriteCountry и FavoriteSport.

  • Мы используем class, чтобы идентифицировать наш элемент действия a и прикрепить click функцию

  • мы используем атрибут html5 data, чтобы сохранить name категории флажка для выполнения выбора. в этом сценарии data-toselect='favorite_country', data-toselect='favorite_sport'

  • передать name, который мы получаем из атрибута данных data-toselect, в функцию prop и обновить значение до checked

$(function() {
  $(".select-all-link").click(function() {
    var toSet = $(this).data("toselect");
    $("input[name='" + toSet + "']").prop('checked', 'checked');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h3>Favorite Countries</h3>
  <a id="fav_countries_checkboxAll_option" class="select-all-link" data-toselect="favorite_country" href="javascript:;">Select all</a>
  <legend>Favorite Countries?</legend>
  <input type="checkbox" name="favorite_country" value="India">India<br>
  <input type="checkbox" name="favorite_country" value="Singapore">Singapore<br>
  <input type="checkbox" name="favorite_country" value="Australia">Australia<br>
  <input type="checkbox" name="favorite_country" value="Ameria">Ameria<br>


  <a id="fav_sports_checkboxAll_option" class="select-all-link" data-toselect="favorite_sport" href="javascript:;">Select all</a>
  <legend>Favorite Countries?</legend>

  <input type="checkbox" name="favorite_sport" value="Cricket">Cricket<br>
  <input type="checkbox" name="favorite_sport" value="VolleyBall">VolleyBall<br>
  <input type="checkbox" name="favorite_sport" value="Tennis">Tennis<br>

</body>
0 голосов
/ 23 октября 2019

Вы можете сделать это даже без классов или идентификаторов, используя nextUntil() и filter(): 

$(function(){
 $("a[id*=checkboxAll]").click(function(){
  $(this).nextUntil('h3').filter("input:checkbox").prop('checked', 'checked');
 }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Favorite Countries</h3>
<a id="fav_countries_checkboxAll_option" href="javascript:void(0);">Select all</a> <input type="checkbox" class="fav-color" name="country1" value="India">India<br/> <input type="checkbox" class="fav-color" name="country2" value="Singapore">Singapore<br/> <input type="checkbox" class="fav-color" name="country3" value="Australia">Australia<br/> <input type="checkbox" class="fav-color" name="country4" value="Ameria">Ameria<br/> <br/>
<h3>Favorite Sports</h3> 
<a id="fav_sports_checkboxAll_option" href="javascript:void(0);">Select all</a> <input type="checkbox" class="fav-sport" name="sport1" value="Cricket">Cricket<br/> <input type="checkbox" class="fav-sport" name="sport2" value="Tennis">Tennis<br/> <input type="checkbox" class="fav-sport" name="sport3" value="VolleyBall">VolleyBall

Редактировать: теперь я сделал селектор $("a") более конкретным, чтобы соответствовать реальной ситуации приложения.

Я выбрал "h3" быть ограничивающим элементом для селектора nextUntil(). Вы должны выбрать селектор, который надежно соответствует структуре вашей страницы. Этот селектор или конец страницы должен появляться после каждого флажка каждой группы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...