изменить изображение внутри div - массив идентификаторов изображений

0

Как изменить изображение на div при нажатии на входное изображение.
Я пробовал это, но ничего не работает.?

управление даже не входит в часть if/else каждого цикла().

Мой div имеет идентификатор, мне нужен идентификатор для каждого изображения внутри каждого div, чтобы изменить изображение или идентификатор DIV, более чем достаточно, чтобы изменить изображение внутри div?

javascript и код JQuery: -

var div_class_scrollable_Image = [
"Groung-Floor-Image" , "Floor-1-Image", "Floor-2-Image", "Floor-3-Image"
];

function show_area( parameter_image_array, parameter_image)
{

  // set img src

  // $("." + parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

  //$('.Floor-3 img').attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

  $(parameter_image_array).each(function(index, element) {
        if(element != parameter_image )
        {
          $(element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');

        }
        else
        {
          $(element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
        }
       //alert("hellooooo");
    });


}



Html code :---    
    <div id="images" class="scrollable">
        <div id="Groung-Floor" class="input">
            <input id="Groung-Floor-Image" type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ" onclick="show_area( 'div_class_scrollable_Image', 'Groung-Floor-Image' )"  />
            <p >Groung-Floor</p>
            <hr>
        </div>
        <div id="Floor-1" class="input">
            <input id="Floor-1-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area('div_class_scrollable_Image', 'Floor-1-Image')"  />
            <p >1-Floor</p>
            <hr>
        </div>
        <div id="Floor-2" class="input">
            <input id="Floor-2-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png"  onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image')"  />
            <p >2-Floor</p>
            <hr>
        </div>
        <div id="Floor-3" class="input">
            <input id="Floor-3-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image', )"  />  
            <p >3-Floor</p>
            <hr>              
        </div>

    </div>

Пожалуйста, предложите

  • 0
    Где вы устанавливаете переменную parameter_image_array? Сделайте JSFiddle.
  • 0
    Ваша function show_area() ожидает 2 параметра , но Youre отправки 3 параметра в ваших элементы onclick событий.
Показать ещё 3 комментария
Теги:

3 ответа

0

Спасибо batu Zet или исправление проблемы с массивом.

эта ссылка ответила на мой вопрос...
Программно изменить src тега img

Это сработало:

$(parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

Это также сработало: ---

  $(parameter_image_array).each(function(index, element) {
        if(element != parameter_image )
        {
          $("#" +element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');

        }
        else
        {
          $("#" + element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
        }

    });
Поделиться
0

Извините, но ваш код почти не читается и... уродливый ;-) Я дам вам этот код как подсказку, чтобы улучшить ваши:

HTML

<div>
    <input type="image" src="foo.jpg" data-alt-src="bar.jpg" class="swap" />
</div>

JavaScript

$(".swap").click(function () {
    $(".swap").each(function () {
        var alt = $(this).data("alt-src");
        $(this).attr("src", alt);
    });    
    //do other work if needed...
});

Как вы можете видеть, я использую атрибут data- для установки альтернативного изображения непосредственно в теге HTML, затем я читаю его в событии клика, и я заменяю текущий src на альтернативное изображение.

Поделиться
  • 0
    Я отредактировал код , .. это не то, чего я хочу достичь.
  • 0
    Как я уже объяснил, это подсказка. Если вы хотите изменить все изображения, тогда просто используйте «each ()», посмотрите отредактированный код.
0

Вы также можете использовать background-image:url("/path/image") для Div и позже изменить его как document.getElementById(DivId).style.backgroundImage = "/path/new_image" См. Http://www.w3schools.com/CSS/css_background.asp

Поделиться
  • 0
    но они также являются абзацем и горизонтальной линией в div.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню