0

Есть ссылки в которые данные подгружаются из БД:

@foreach ($classes as $class)
  <i class="fa fa-2x pt-2 blue-text ico_edit{{ $class->id }}">&#x{{ $class->ico->code}}</i>
  <a class="inputlabel-editNews ico_edit{{ $class->id}} mb-0 mt-2" href="#" data-toggle="modal" data-target="#IconsModal">
 <div class="m-2 pt-2" ">
 Изменить
 </div>
 </a>

@endforeach

При клике на ссылку открывается модальное окно со списком иконок, в котором при выборе иконки она должна замениться в ссылке. как это правильно реализовать? Сейчас у меня сделано так:

@foreach ($classes as $class)
jQuery(document).on('click','#icoedit-choose',function(e){
        var ico_code = $(this).find('.ico-code').text();
        $('i.ico_edit{{ $class->id }}').html(ico_code);
    });
 @endforeach

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

 <form class="tr" role="form" id="form" method="POST" action="" enctype="multipart/form-data">
<input type="hidden" name="id_edit" id="id_edit"  value="">
<div class="td border align-middle p-2 text-center ico_edit">
<i class="fa fa-2x pt-2 blue-text ico_edit">тут иконка</i>
<a class="inputlabel-editNews ico_edit mb-0 mt-2" href="#" data-toggle="modal" data-target="#IconsModal">
<div class="row justify-content-center m-2 pt-2" value="">
<i class="fas fa-pen pr-1 blue-text"></i>Изменить
</div>
</a>
</div>
<input type="hidden" name="ico_edit" id="ico_edit"  value="">
6
  • во-первых уберите навешивание обработчика в цикле. во вторых вам тут в целом on не нужен. При клике в ссылку перед открытие модального окна сохраните указатель на эту ссылку, или ee id. При закрытии модального окна возьмие сохраненную ссылку, и измените в ней класс.
    – teran
    21 мар 2019 в 8:59
  • on нужен потому что #icoedit-choose создается при клике по ссылке другой и просто клик не работает. Если обработчик делаю вне цикла то скрипт не понимает такие конструкции ico_edit{{ $class->id }}. С указанием ид при открытие и закрытие модалки пробывал и все равно иконки меняет во всех ссылках....
    – BorsheC
    21 мар 2019 в 9:09
  • убрать из цикла значит что вам нужен всего один общий обработчик, который будет в коде у себя понимать, на что кликнули (e.relatedTarget), а при закрытии окна эти сведения будут использованы. Не надо вешать свой обработчик на каждую ссылку.
    – teran
    21 мар 2019 в 9:19
  • я и сам прекрасно понимаю что один обработчик хорошо, но как сделать на его на динамически созданные ссылки всю голову сломал...
    – BorsheC
    21 мар 2019 в 9:20
  • 1
    приведите лучше пример готовой верстки без пхп, чтобы из нее можно было сниппет сделать.
    – teran
    21 мар 2019 в 9:26

1 ответ 1

0

Что-то мне подсказывает, что вы хотите сделать что-то типо такого..

$('.icon-list').on('click', '.icon-item', function(){
  let icon = $(this).find('i').attr('class');
  $('.icon-view').find('i').attr('class', icon);
});
@import url('https://use.fontawesome.com/releases/v5.3.1/css/all.css');

i {
  display: block;
  width: 40px;
  text-align: center;
}

i::before {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.icon-view {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: gray;
  color: #fff;
}

.icon-list {
  padding-top: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}

.icon-list::after {  
  content: '';
  display: block;
  clear: both;
}

.icon-item {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid gray;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  color: gray;
  cursor: pointer;
}

.icon-item:hover {
  background: gray;
  color: #fff;
}

.icon-item i {
  margin: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="icon-view">
  <i></i>
</div>

<div class="icon-list">
  <div class="icon-item">
    <i class="fab fa-accessible-icon"></i>
  </div>
  <div class="icon-item">
    <i class="fas fa-ad"></i>
  </div>
  <div class="icon-item">
    <i class="fab fa-alipay"></i>
  </div>
  <div class="icon-item">
    <i class="fas fa-angry"></i>
  </div>
  <div class="icon-item">
    <i class="fas fa-arrow-alt-circle-right"></i>
  </div>
</div>

Т.е. при выборе из списка менять иконку.

Т.к. вы используете FontAwesome, я предлагаю менять не саму иконку (<i class="***"></i>), а именно класс (пример выше).


$('.icon-list').on('click', '.icon-item', function(){
  let icon = $(this).find('i').attr('class'),
      iconClass = $(this).attr('class').split(' ')[1];
  $('.icon-view.'+iconClass).find('i').attr('class', icon);
});
@import url('https://use.fontawesome.com/releases/v5.3.1/css/all.css');

i {
  display: block;
  width: 40px;
  text-align: center;
}

i::before {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.icon-viewer {
  display: block;
}

.icon-view {
  display: inline-block;
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  color: #fff;
}

.icon-view:not(:last-child) {
  margin-right: 10px;
}

.icon-list {
  max-width: 275px;
  padding-top: 10px;
  box-sizing: border-box;
}

.icon-list::after, .icon-viewer::after {  
  content: '';
  display: block;
  clear: both;
}

.icon-item {
  display: inline-block;
  float: left;
  width: 40px;
  height: 40px;
  border: 1px solid gray;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  color: gray;
  cursor: pointer;
}

.icon-item i {
  margin: -1px;
  pointer-events: none;
}

.icon-view.one-view {
  background: gray;
}

.icon-view.two-view {
  background: red;
}

.icon-view.three-view {
  background: blue;
}

.icon-item.one-view {
  color: gray;
}

.icon-item.two-view {
  color: red;
}

.icon-item.three-view {
  color: blue;
}

.icon-item.one-view:hover {
  background: gray;
}

.icon-item.two-view:hover {
  background: red;
}

.icon-item.three-view:hover {
  background: blue;
}

.icon-item:hover {
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="icon-viewer">
  <div class="icon-view one-view">
    <i></i>
  </div>

  <div class="icon-view two-view">
    <i></i>
  </div>

  <div class="icon-view three-view">
    <i></i>
  </div>
</div>

<div class="icon-list">
  <div class="icon-item one-view">
    <i class="fab fa-accessible-icon"></i>
  </div>
  <div class="icon-item two-view">
    <i class="fas fa-ad"></i>
  </div>
  <div class="icon-item three-view">
    <i class="fab fa-alipay"></i>
  </div>
  <div class="icon-item one-view">
    <i class="fas fa-angry"></i>
  </div>
  <div class="icon-item three-view">
    <i class="fas fa-arrow-alt-circle-right"></i>
  </div>
  <div class="icon-item one-view">
    <i class="fab fa-aviato"></i>
  </div>
  <div class="icon-item two-view">
    <i class="fas fa-band-aid"></i>
  </div>
  <div class="icon-item three-view">
    <i class="fas fa-battery-full"></i>
  </div>
  <div class="icon-item two-view">
    <i class="fab fa-behance-square"></i>
  </div>
  <div class="icon-item one-view">
    <i class="fas fa-birthday-cake"></i>
  </div>
  <div class="icon-item two-view">
    <i class="fas fa-bone"></i>
  </div>
  <div class="icon-item three-view">
    <i class="fas fa-calendar"></i>
  </div>
  <div class="icon-item one-view">
    <i class="fas fa-chess"></i>
  </div>
  <div class="icon-item three-view">
    <i class="fas fa-car-side"></i>
  </div>
  <div class="icon-item one-view">
    <i class="fas fa-box"></i>
  </div>
</div>

7
  • Не работает, ничего не происходит...
    – BorsheC
    21 мар 2019 в 9:22
  • Скиньте код не в цикле, а который уже на html, хотя бы самой вёрстки
    – De.Minov
    21 мар 2019 в 9:27
  • Не совсем понял что нужно, но убрал пхп и оставил только верстку, выше закинул
    – BorsheC
    21 мар 2019 в 9:51
  • Обновил ответ, посмотрите.
    – De.Minov
    21 мар 2019 в 15:14
  • Имменно это я и хочу, и именно так у меня сейчас и работает, НО если классов class="icon-view будет два и более, как сделать чтобы иконка менялась именно в том классе. вот проблема моя в чем(
    – BorsheC
    21 мар 2019 в 16:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.