Когда пользователь дважды щелкает изображение, я хочу добавить в ближайший div (imageSelection) имя файла или значение атрибута alt. Прямо сейчас, когда я дважды щелкаю изображение, ничего не происходит, поэтому я думаю, что ошибаюсь в коде, но не знаю, где именно.
$(document).on('dblclick', 'img', function () {
var imgurl = window.location.pathname + $(this).attr('src');
window.open(imgurl, '_blank');
});
$("input[name=imageselect]:radio").click(function () {
var imgurl = window.location.pathname + $(this).attr('src');
var $imageSelection = $('#image_selection');
if ($('input[name=imageselect]:checked').val() == "filename") {
var varsrc = $(this).attr('src');
$imageSelection.append(varscrc);
} else {
var varalt = $(this).attr('alt');
$imageSelection.append(varalt);
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "radio_images">
File Name <input type = "radio" name = "imageselect" value = "filename"> <br>
Description <input type = "radio" name = "imageselect" value = "description" checked> <br>
</div>
<div id = "imageSelection">
</div>
<div id = "images">
<h3>Some Images</h3>
<p><img src = "firetruck.jpg" alt = "pic of truck"> |
<img src = "baseball.jpg" alt = "pic of baseball" > |
<img src = "soccer_ball.jpg" alt = "pic of soccer ball" >
</p>
</div>
Итак, у вас есть опечатка в вашем идентификаторе imageSelection
, и вам нужно изменить функцию .click
, чтобы добавление происходило, когда вы щелкаете изображение, а не вход радио. Вы можете найти изменения в следующем фрагменте.
$(document).on('dblclick', 'img', function () {
var imgurl = window.location.pathname + $(this).attr('src');
window.open(imgurl, '_blank');
});
$("img").click(function () {
var imgurl = window.location.pathname + $(this).attr('src');
var imageSelection = $('#imageSelection');
if ($('input[name=imageselect]:checked').val() === "filename") {
var varsrc = $(this).attr('src');
imageSelection.append(varsrc);
} else {
var varalt = $(this).attr('alt');
imageSelection.append(varalt);
}
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id = "radio_images">
File Name <input type = "radio" name = "imageselect" value = "filename"> <br>
Description <input type = "radio" name = "imageselect" value = "description" checked> <br>
</div>
<div id = "imageSelection">
</div>
<div id = "images">
<h3>Some Images</h3>
<p><img src = "firetruck.jpg" alt = "pic of truck"> |
<img src = "baseball.jpg" alt = "pic of baseball" > |
<img src = "soccer_ball.jpg" alt = "pic of soccer ball" >
</p>
</div>
Надеюсь, это поможет.