БЛОГ НА HUSL


Как запретить переход ссылки по клику, но выполнить функцию

Автор вопроса: Уоли Клуд

как можно реализовать запрет перехода по ссылки, но при этом выполнить функцию замены href

function l_image4 (a) {
  document.example_img13.src = a + '.png';
    
}

<a  href="javascript:l_image4('images/etika/672501')"  > <div class="varic1"> <img class="notact" src="images/etika/672501.png"><div><b>Etika</b><br>Белый</div></div></a>

Пробовал так:

     function l_image4 (a) {
       e.PreventDefault;   
document.example_img13.src = a + '.png';
             
        }

и так :

function l_image4 (a) {
    document.example_img13.src = a + '.png';
          return false;      
            }

и +так

<a href="javascript:l_image4('images/etika/672501')" onclick="return l_image4();">

Либо не работает и ссылка и функция, либо функция ломается.

Без всех этих действий, работает только один раз после загрузки страницы, но как только нажать на какую либо кнопку (той же функции или другой) ссылка начинает переходить. На локалке все работает как надо без переходов

Код на сайте https://euroelectric.kz/konfigurator2

Код без картинок https://codepen.io/Axel0303/pen/gOmEmvz

Причем аналогичная функция но в другом месте кода (там где выбирать текстуру) работает без перехода. Поэтому думаю дело в общей структуре всего кода, а не только в этом кусочке.

П\С: Надеюсь теперь я правильно сформулировал вопрос, товарищ модератор


Источник

Ответы (3 шт):

Автор решения: alex

onclick="l_image4();"

UPD.

Вот что я имел ввиду. В событие onclick пихаем функцию, а в href решетку. функция должна возвращать false.

Все работает, я проверил.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function l_image4 (a) {
            document.getElementById("example_img13").setAttribute("src", a + '.png');
            return false;
        }
    </script>

    <a  href="#" onclick="l_image4('images/etika/672502')">
        <div class="varic1">
            <img class="notact" id="example_img13" src="images/etika/672501.png">
            <div>
                <b>Etika</b>
                <br>Белый
            </div>
        </div>
    </a>

</body>
</html>
→ Ссылка
Автор решения: 隼SAPSAN

я бы отловил клик каждого элемента "a" в нужном блоке и получал из атрибута "data" данные для подмены

И мне не понятно почему у вас JS код половина на чистом js, а половина на JQuery. Вы либо пишите полностью на JS, либо полностью на JQuery. Глаза начинают разбегаться.

$('.container a').on('click', function()
{
  alert($(this).data('img'))
})
.container a
{
  display: block;
  width: 30px;
  text-align: center;
  cursor: pointer;
  padding: 5px;
  margin-bottom: 5px;
  border: 1px solid black;
  background: lightgrey;
 }
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
  <a data-img="1-img.png">1</a>
  <a data-img="2-img.png">2</a>
  <a data-img="3-img.png">3</a>
  <a data-img="4-img.png">4</a>
  <a data-img="5-img.png">5</a>
  <a data-img="6-img.png">6</a>
</div>

Дополню в связи с последним комментарием под моим ответом! 

$('.container a').on('click', function(e)
{
 e.preventDefault();
 alert(`Старое значение атрибута href: ${$(this).attr('href')}`);
 $(this).attr({"href": "new-img.png"});
 alert(`Новое значение атрибута href: ${$(this).attr('href')}`);
})
.container a
{
  display: block;
  width: 30px;
  text-align: center;
  cursor: pointer;
  padding: 5px;
  margin-bottom: 5px;
  border: 1px solid black;
  background: lightgrey;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
 <a href="1-img.png">1</a>
 <a href="2-img.png">2</a>
 <a href="3-img.png">3</a>
 <a href="4-img.png">4</a>
 <a href="5-img.png">5</a>
 <a href="6-img.png">6</a>
</div>

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

$('#mCSB_2_container a').on('click', l_image2);

     function l_image2 (event)
    {
        event.preventDefault();
        $('#example_img2').attr({src: $(this).attr('href')});
    }

    $('#mCSB_4_container a').on('click', l_image3);

     function l_image3 (event)
    {
        event.preventDefault();
        $('#example_img').attr({src: $(this).attr('href')});
    }
.container a
        {
          display: block;
          width: 30px;
          text-align: center;
          cursor: pointer;
          padding: 5px;
          margin-bottom: 5px;
          border: 1px solid black;
          background: lightgrey;
         }

         #example_img2
         {
            position: relative;
            left: 29px;
         }

         #example_img
         {
            position: relative;
            left: -170px;
            top: -21px;
         }
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<img id="example_img2" src="https://euroelectric.kz/images/etika/vikl/legrand_etika_672601.png">
<img src="https://euroelectric.kz/images/neo.png" class="ramka1img" name="example_img" id="example_img" alt="">
    
    <div class="container" id="mCSB_4_container">
        <h3>Выберите рамку</h3>
      <a href="https://euroelectric.kz/images/etika/672501.png">1</a>
      <a href="https://euroelectric.kz/images/etika/672511.png">2</a>
      <a href="https://euroelectric.kz/images/etika/672521.png">3</a>
      <a href="https://euroelectric.kz/images/etika/672531.png">4</a>
    </div>

    <div class="container" id="mCSB_2_container">
        <h3>Выберите механизм</h3>
      <a href="https://euroelectric.kz/images/etika/vikl/legrand_etika_672601.png">1</a>
      <a href="https://euroelectric.kz/images/etika/vikl/legrand_etika_672401.png">2</a>
      <a href="https://euroelectric.kz/images/etika/vikl/legrand_etika_672301.png">3</a>
      <a href="https://euroelectric.kz/images/etika/vikl/legrand_etika_672201.png">4</a>
    </div>

→ Ссылка
Автор решения: Уоли Клуд

@隼SAPSAN Вот пример кода, куда хочу интегрировать, тоесть это все должно работать в этой связке. Но этот вариант почему то не работает. Точнее и переход происходит и переменные не добавляются в ссылке

    $('#mCSB_4_container a').on('click', l_image3);

function l_image3 (event) {
event.preventDefault();




 if (document.getElementById('radio-1').checked) { 
 if (document.getElementById('radio-3').checked) {
      
        $('#example_img').attr({src: $(this).attr('href') + '.png'});
    }
   else if (document.getElementById('radio-4').checked) {     
  $('#example_img').attr({src: $(this).attr('href') + 'post2' + '.png'});
    }
    else if (document.getElementById('radio-5').checked) {

 $('#example_img').attr({src: $(this).attr('href' )+ 'post3' + '.png'} );
    }
    else if (document.getElementById('radio-6').checked) { 
 $('#example_img').attr({src: $(this).attr('href' )+ 'post4' + '.png'} );
    }
    else if (document.getElementById('radio-7').checked) { 
 $('#example_img').attr({src: $(this).attr('href' )+ 'post5' + '.png'} );
    }
    } 
 else if (document.getElementById('radio-2').checked) {
     if (document.getElementById('radio-3').checked) {
      $('#example_img').attr({src: $(this).attr('href') + '.png'});
    }   
     else if (document.getElementById('radio-4').checked) { 
  $('#example_img').attr({src: $(this).attr('href') + 'post22' + '.png'});
    }
    else if (document.getElementById('radio-5').checked) {    
 $('#example_img').attr({src: $(this).attr('href') + 'post33' + '.png'});
    }
    else if (document.getElementById('radio-6').checked) {
      $('#example_img').attr({src: $(this).attr('href') + 'post44' + '.png'});
   
    }
    else if (document.getElementById('radio-7').checked) {
    
  $('#example_img').attr({src: $(this).attr('href') + 'post55' + '.png'});
 
    }

    }
    



}
  //массив данных
  
  const arr22 = [
      // Категория 1, категория 2, href, src, text
      ["etika", "https://euroelectric.kz/images/etika/672501", "https://euroelectric.kz/images/etika/672501.png", "<b>Etika</b><br>Белый"],
      ["etika", "https://euroelectric.kz/images/etika/672511", "https://euroelectric.kz/images/etika/672511.png", "<b>Etika</b><br>Слоновая кость"],
       ["etika", "https://euroelectric.kz/images/etika/672521", "https://euroelectric.kz/images/etika/672521.png", "<b>Etika</b><br>Светлая галька"],
        ["etika", "https://euroelectric.kz/images/etika/672531", "https://euroelectric.kz/images/etika/672531.png", "<b>Etika</b><br>Красный"],
         ["etika", "https://euroelectric.kz/images/etika/672541", "https://euroelectric.kz/images/etika/672541.png", "<b>Etika</b><br>Зеленый папоротник"],
              ["etika", "https://euroelectric.kz/images/etika/672551", "https://euroelectric.kz/images/etika/672551.png", "<b>Etika</b><br>Алюминий"],
           ["etika", "https://euroelectric.kz/images/etika/672561", "https://euroelectric.kz/images/etika/672561.png", "<b>Etika</b><br>Сливовый"],
              ["etika", "https://euroelectric.kz/images/etika/672571", "https://euroelectric.kz/images/etika/672571.png", "<b>Etika</b><br>Какао"],
               ["etika", "https://euroelectric.kz/images/etika/672581", "https://euroelectric.kz/images/etika/672581.png", "<b>Etika</b><br>Антрацит"],
          ["valenaclass", "https://euroelectric.kz/images/etika/672551", "https://euroelectric.kz/images/etika/672551.png", "<b>Etika</b><br>Белый"],
           ["valenalife", "https://euroelectric.kz/images/etika/672561", "https://euroelectric.kz/images/etika/672561.png", "<b>Etika</b><br>Белый"],
            ["valenaallure", "https://euroelectric.kz/images/etika/672501", "https://euroelectric.kz/images/etika/672501.png", "<b>Etika</b><br>Белый"],
             ["celiane", "https://euroelectric.kz/images/etika/672501", "https://euroelectric.kz/images/etika/672501.png", "<b>Etika</b><br>Белый"],
             
    ];

    const collectValue22 = document.getElementById("display_avatar2").value;
    const content_el12 = document.querySelector(".ere6");
    content_el12.innerHTML = arr22
      .filter(([collect]) => {
        return (collectValue22 == "allleg" || collectValue22 == collect)  
      })
      .map(([collect, href, src, text]) => `
        <a   href="${href}" > <div class="varic1">
            <img class="notact2" src="${src}" />
          <div>${text}</div>
        </div></a>
      `).join("");
 <img src="images/etika/672501.png" class="ramka1img" name="example_img" id="example_img" alt="">
 
 
   <div class="config-settings__block config-settings__block_posts2"><div class="config-settings__title">
                                    Ориентация рамки
                                </div>
        <div class="form_radiosa">                      
<div class="form_radio">
    <input id="radio-1" type="radio" name="radio" value="1" checked onclick="return someFunc();">
    <label for="radio-1"></label>
</div>
 
<div class="form_radio2">
    <input id="radio-2" type="radio" name="radio" value="2" onclick="return someFunc();">
    <label for="radio-2"></label>
</div>
</div>
</div>

<div class="config-settings__block config-settings__block_posts">
                                <div class="config-settings__title">
                                    Количество постов
                                </div>
            <div class="form_radio4">                     
                                       <div class="form_radio_btn">
    <input id="radio-3" type="radio" name="radio22" value="3" checked  onclick="return someFunc();">
    <label for="radio-3" >1</label>
</div>
 
<div class="form_radio_btn">
    <input id="radio-4" type="radio" name="radio22" value="4" onclick="return someFunc();">
    <label for="radio-4" >2</label>
</div>
 
<div class="form_radio_btn">
    <input id="radio-5" type="radio" name="radio22" value="5" onclick="return someFunc();">
    <label for="radio-5" >3</label>
</div>
 
<div class="form_radio_btn">
    <input id="radio-6" type="radio" name="radio22" value="6" onclick="return someFunc();">
    <label for="radio-6" >4</label>
</div>
<div class="form_radio_btn">
    <input id="radio-7" type="radio" name="radio22" value="7" onclick="return someFunc();">
    <label for="radio-7" >5</label>
</div>
    </div>  
</div>

<div class="ere6" id="mCSB_4_container"> <div class="mCustomScrollbar" data-mcs-theme="dark" >
<a  href="https://euroelectric.kz/images/etika/672501"  > <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672501.png"><div><b>Etika</b><br>Белый</div></div></a>
<a  href="https://euroelectric.kz/images/etika/672511"  > <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672511.png"><div><b>Etika</b><br>Слоновая кость</div></div></a>
<a  href="https://euroelectric.kz/images/etika/672521"  >  <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672521.png"><div><b>Etika</b><br>Светлая галька</div></div></a>
<a  href="https://euroelectric.kz/images/etika/672531"  > <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672531.png"><div><b>Etika</b><br>Красный</div></div></a>
 <a  href="https://euroelectric.kz/images/etika/672541"  > <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672541.png"><div><b>Etika</b><br>Зеленый папоротник</div></div></a>
 <a  href="https://euroelectric.kz/images/etika/672551"  >  <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672551.png"><div><b>Etika</b><br>Алюминий</div></div></a>
  <a  href="https://euroelectric.kz/images/etika/672561"  >  <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672561.png"><div><b>Etika</b><br>Сливовый</div></div></a>
    <a  href="https://euroelectric.kz/images/etika/672571"  > <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672571.png"><div><b>Etika</b><br>Какао</div></div></a>
    <a  href="https://euroelectric.kz/images/etika/672581"  >  <div class="varic1"> <img class="notact" src="https://euroelectric.kz/images/etika/672581.png"><div><b>Etika</b><br>Антрацит</div></div></a>

  </div>
 </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.