Можно ли как то упростить код

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
Написал свой код так сказать для изучения js, что в этом коде можно изменить?

js

jQuery(function($) {
  $('.radio').change(function() {
    $('.radio').not(this).prop({checked: false});
    if ($('#checkbox_check_1').is(':not(:checked)')) {
        $('#ttt').prop('value', '0');
        $('#qqq').val('0');
        $('#fff').css('display','none');
    } else {
      $('#fff').css('display','block');
    }
    if ( $('#checkbox_check_2').is(':not(:checked)') ) {
        $('#rrr').prop('value', '0');
        $('#jjj').val('0');
        $('#yyy').css('display','none');
    } else {
        $('#yyy').css('display','block');
    }
  });

html

<center>
<input type="text" id="qqq"><br>
<input type="text" id="jjj"><br>
<input type="checkbox" class="radio" id="checkbox_check_1" checked>
<input type="checkbox" class="radio" id="checkbox_check_2">
<br>
<div id="fff" style="display:block;">
<select id="rrr">
<option value="0" select="selected">Select 1</option>
<option value="1">Select 1 первый</option>
<option value="2">Select 1 второй</option>
<option value="3">Select 1 третий</option>
</select>
</div>
<div id="yyy" style="display:none;">
<select id="ttt" disabled="false">
<option value="0" select="selected">Select 2</option>
<option value="1">Select 2 первый</option>
<option value="2">Select 2 второй</option>
<option value="3">Select 2 третий</option>
</select>
</div>
</center>
Checkbox css jquery
#2

А задача какая была?)

#3

Есть два checkboxа и два select, которые привязаны друг к другу. При выборе одного из checkboxов должен отобразится один из selectов. Если выбран был не тот select и нужно выбрать другой то при нажатии на неактивный checkbox параметры selectа активного checkboxа должны сбросится и появится select неактивного checkbox.
Так же к каждому select привязан свой input в который передается значение value.

Надеюсь понятно рассказал

#4

Инпуты странные, 0 записывается только при смене чекбоксов :thinking:

И если чекбоксы как радио, то по идее нельзя разрешать все снимать.

Каждый чекбокс тут не надо проверять, текущий же есть в this. Только надо селект найти, например, завести Map/ассоц. массив или в data- атрибуты селекторы записать.

  <input type="checkbox" data-select="#rrr" class="radio" id="checkbox_check_1" checked>
  <input type="checkbox" data-select="#ttt" class="radio" id="checkbox_check_2">

$('.radio').change(function() {
  const thisCheckbox = $(this)
  const isChecked = thisCheckbox.is(':checked')
  const select = $(thisCheckbox.data('select'))
  const allSelects = $('select')

  $('.radio').not(thisCheckbox).prop('checked', false)

  allSelects.parent().hide()
  allSelects.prop('disabled', true)

  if (isChecked) {
    select.parent().show()
    select.prop('disabled', false)
    select.val(0)
  }
})

https://jsfiddle.net/AlexP11223/Lfrnwe6a/31/

#5

нет они не как радио используются в class то что написано radio это я просто взял пример и не стал править оставил как есть

Так же когда меняешь в select значение ноль меняется на значение value … а при смене checkbox значение в input должно сбрасываться на ноль

в вашем варианте почему то в input не пишется

Один select должен добавить какое то значение в один из input`ов, а второй select соответственно в другой input

#6

там нет этого, можно добавить аналогично как селект.

тогда еще видимо надо как минимум по умолчанию 0.

#7

ну сейчас уже на джаквери никто особо не пишет.Это уже устраревшая технология.И уже умершая.Хотя возжможно в какой мадженте ещё используется. Если цель что-то попробовать - то можно посмотреть как на reactjs,angular 2+ и vie js это написать.Непонятна какая цель изучения?)

#8

Ну она устаревшая в основном потому что для многих фич уже есть альтернативы в самом JS и можно не брать jQuery.
http://youmightnotneedjquery.com/

Но jQuery все равно еще достаточно популярен.

И там есть интересные удобные штуки.
Например тут

получить и скрыть всех родителей. Без циклов и т.д.

Или data(): преобразовывает типы, позволяет получить все data- атрибуты как массив.

#9

уже как давно мертв.После появления библиотечек в своё время как angularjs, backbone ,а после них появились angular 2+,react js и vie js.Оснавная причина почему от него отказались и отоши в своё в своё время - это
трудность поддежки этих макарон,селектор jquery трудоемкая операция и тот же реакт с виртуальным домом меньше затратная,у jquery нельзя было писать тесты на фронте.Jquery можно встетить в старых проектах, где лень переписывать код.Если цель изучения заработок денег - то сейчас все проекты на новых технологиях, если ты скажешь что заюзал jquery - то на тебя косо посмотрят. Ну та же маджента его вроде ещё использует вроде.

#10

Это большой фреймворк, а не библиотечка )

Это разные вещи, jQuery просто делает некоторые вещи удобнее, а Angular/React/Vue фундаментально меняют подход к разработке.

Это среди всяких модных ребят.
А так большинство проектов это как раз вордпресы и старые проекты.
Где больше денег скорее зависит не от технологий, а от умения продавать себя.

#11

ну я говорю за что сейчас большие деньги платят в конторах и работе на иностранных заказчиков

я в курсе.А jquery уже как умер в году так 2016.

каких модных - на всех норм конторах аутсорса и продуктовых нормальных посмеются с jquery. Хотя мой знакомый до сих пор на mvc с jquery сидит на одной конторе.Там главное чтобы сайт работал.

#12

Говорят, много платят как раз за древность типа COBOL :slight_smile:

Ага, а РНР в 2004, когда RoR появился ))

Но да, если хочется изучить что-то новое в JS, расширить сознание, то React и т.п. — хороший вариант.

Но базовые знания jQuery тоже никому не повредят. А смеяться над технологиями это уже фанатизм какой-то.

#13

Ага, а РНР в 2004, когда RoR появился ))

ну php они обновляли хорошо, раньше он устапал например .net , php не мертв его хорошо обновивляли и счас он норм

Но да, если хочется изучить что-то новое в JS, расширить сознание, то React и т.п. — хороший вариант.

ну если хочется поучить старые технологии то почему и нет, я сейчас говорю про современное и на чем сейчас сайты пишут.Также можно и старый javascript учить,старых версий - он браузреами подерживается, а толку от этого когда он постоянно обновляется и например тоже появления классов было сюрпризом в своё время в javascript-e

#14

Чот это с цитатой не согласуется, уже и React устарел что ли? :partyparrot:

А старый JS да, можно не учить (ну разве что для чтения кода) если есть возможность прикрутить Babel и т.п. Даже в плагинах к вордпресу уже это делают и используют современный JS.

#15

ну сейчас тренд фронта react js, angular 2+, и vue js. Но через несоколько лет может и он утстареть как было с паттерном mvc ,которого заменил spa. Диалог превращается с Алех в какой-то спор .Я не любить такого.Большо в этой теме писать ничего не буду.Ну я сказал что и как сейчас на фронте

#16

Так я ж и не спорил, а как раз написал, что React и т.п. — хороший вариант для изучения, если хочется освоить что-то принципиально новое. :thinking:

Вообще в этой теме под “изучением js” наверно имелись в виду именно основы JS, синтаксис, принцип взаимодействия с DOM. Что все-таки желательно освоить перед тем как браться за реакты.

Ну и реакт тоже надо понимать когда стоит брать, а не пихать во всё подряд. Например, если сайт делается в основном на серверных технологиях (что может упростить разработку и тестирование, в зависимости от задачи), а не SPA и т.п. , то брать целый реакт для пары простых скриптов не стоит.