jQuery изменение динамических элементов

145

11 декабря 2019, 14:40

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

@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="">

Answer 1

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

$('.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>