2014-02-07 1 views
0

Я новичок здесь, я сгенерировал 5 изображений из массива. Теперь я хочу выбрать эти изображения по мере выбора с помощью флажка (значит, я могу выбрать 1 изображение или 2 изображения или больше по выбору). После выбора я хочу отобразить их имя в качестве оповещения о том, что вы выбрали эти изображения. Пожалуйста, направляйте меня, потому что я новичок в javascript. Заранее спасибо.выберите изображения по выбору и покажите их имя в качестве оповещения в javascript

+0

Что значит «их имя»? Вы имеете в виду атрибут имени или только текст ниже/над изображениями? Также, пожалуйста, покажите соответствующий код, чтобы мы могли помочь вам легче :). –

+0

На самом деле у меня есть десять чисел от 1 до 10. Я хочу показывать изображения вместо цифр. например, для 1 числа, я хочу использовать изображение «1.jpg». Когда пользователь выбирает это оповещение об изображении, показанное как то, что вы выбрали номер 1. Когда пользователь выбирает «1.jpg», «2.jpg», «3.jpg», он будет предупреждать, что вы выбрали 1,2 и 3 цифры. – user3284778

+0

Скрипка работает, ее легко адаптировать к сценарию с таким числом. Вы можете принять ответ и сделать свое дело сейчас :) – pid

ответ

0

Не совсем понятно, какой приемлемый выход, но вот что-то, что накапливает выбранные фотографии и отображает изображение src для выбранных фотографий.

var PhotoSrcArray = [ 
    "http://placekitten.com/g/60/60", 
    "http://placekitten.com/70/60", 
    "http://placekitten.com/g/60/70", 
    "http://placekitten.com/70/70", 
    "http://placekitten.com/g/80/80" 
]; 

for(var i = 0; i < PhotoSrcArray.length; i++){ 
    $("#imgs").append('<li><label><input type="checkbox"></input><img src="'+PhotoSrcArray[i] + '" data-index="'+(i+1).toString() + '"/></label></li>'); 
} 

var myArray = []; 

$("li input").change(function(event){ 
    if (this.checked){ 
     myArray.push($(event.currentTarget).next('img').attr('data-index')); 
    } 
    else { 
     var indexOfPhoto = myArray.indexOf($(event.currentTarget).next('img').attr('data-index')); 
     if (indexOfPhoto > -1){ 
      myArray.splice(indexOfPhoto, 1); 
     } 
    } 
    myArray.sort(); 
    $("#output").html(myArray.join(' ')); 
    //or alert it if you'ld like 
}); 

Адрес working fiddle here.

0

Это рабочий JsFiddle.

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

function bind_checkbox_image(checkboxId, imageId) 
{ 
    document.getElementById(checkboxId).onchange = function() { 

     alert(document.getElementById(imageId).getAttribute("title")); 
    }; 
} 

Изображение должно иметь название и изменение на флажке будет показано, что название:

<img id="myimage" title="the image text" src="..." /> 
<input type="checkbox" id="mycheckbox" /> 

Теперь вы можете связать эти:

bind_checkbox_image("mycheckbox", "myimage"); 

ЭОД T: bugfix inverted ids of checkbox и изображение

Смежные вопросы