Пользовательская гиперссылка на изображение, отображаемое через jquery - PullRequest
Новая
       7

Пользовательская гиперссылка на изображение, отображаемое через jquery

0 голосов
/ 22 января 2019

У меня есть простая html-страница, на которой отображается изображение в соответствии с выбором из выпадающего меню. 

<head>
<script src="jquery.min.js"></script>
</head>
<div id="mymenu">
<select id="men" onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);chngSel()">
<option value="product_a.png" selected>Product A</option>
<option value="product_b.png" selected>Product B</option>
<option value="product_c.png" selected>Product C</option>
</select>
</div>
<img id="imageToSwap" class="profile" src="all_products.png">
</head>
</html>

Изображение отображается согласно выбранной опции.

Когда выбрана опция Product B, отображается product_b.png, можно ли изменить гиперссылку на страницу product_b.html после нажатия на product_b.png? Переменная href для отображаемого изображения?

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Ваш HTML 

<head>
<script src="jquery.min.js"></script>
</head>
<body>
     <div id="mymenu">
       <select id="men">
            <option data-url="/productA" value="product_a.png">Product A</option>
            <option data-url="/productB" value="product_b.png">Product B</option>
            <option data-url="/productC" value="product_c.png">Product C</option>
        </select>
    </div>
    <img id="imageToSwap" class="profile" src="all_products.png">
</body>
</head>
</html>

JQuery 

$(function() {
    var $imageToSwap = $('#imageToSwap');

    // change the source of the image
    $('#men').on('change', function(e) {
        var $this = $(this),
            src = $this.val(),
            url = $this.data('url');

        $imageToSwap.attr({ src }).data({ url });
    });

    // click event for the image
    $imageToSwap.on('click', function() {
        var $this = $(this),
            url = $this.data('url');

        location.href = url;
    });
});
0 голосов
/ 22 января 2019

Не уверен, но вы не можете иметь 3 выбранных варианта одновременно. Выбранный используется как «выбор по умолчанию». Попробуйте использовать его только один раз.

...