scenariusz: Próbuję utworzyć skrypt, który pozwala użytkownikowi kliknąć obraz miniatur i wyświetlić większy obraz w polu podglądu. Używam div i img dla tego przykładu, na razie na razie symbol zastępczy.

Pytanie w jQuery, czy istnieje sposób na korzystanie z funkcji z parametrami jako wywołanie zwrotne dla słuchacza zdarzeń OnClick? Spojrzałem na addEventListener i Onclick i .on metodą w jQuery, ale nic nie wydaje się pasować do tego, czego szukam.

moje próby:

  1. http://jsfiddle.net/davideoGenepeterson/9emhuzw0/3/

  2. http://jsfiddle.net/htrr/931/

javascript:

var numberOfImages = 4;
var imageArray = [];

//since i'm going to hide all other divs each time a img is clicked,
// I need to be calling from imageArray[] so I can difArray check later
for (i = 0; i <= numberOfImages; i++) {
    //counting starts from zero, but frontend already built their naming convention to start with 1
    if (i === 0) {
        continue
    }
    imageArray.push(i);
}

for (i = 0; i <= imageArray.length; i++) {
    if (i === 0) {
        continue
    }  
    //on each img click show corresponding div and hide all others, not working
    $("#img-" + imageArray[i]).on('click', function () {
        $("#div-" + i).show();
    });
}
0
user1105787 16 sierpień 2014, 22:46

2 odpowiedzi

Najlepsza odpowiedź

Inne rozwiązanie (cztery odmiany)

Za)

// JavaScript
var img = document.getElementsByTagName('IMG'),
    div= document.getElementsByTagName('DIV'), 
    current, i;

for(i = 0; i < img.length; i++){
  (function(i){ 
    img[i].onclick = function(){
      div[i].style.display = 'block';
      if(current) current.style.display = 'none';
      current = div[i]; 
    };
  })(i);
}

B)

var img = document.getElementsByTagName('IMG'),
    div= document.getElementsByTagName('DIV'), 
    current, i;

for(i = 0; i < img.length; i++){
    (function(i){
      img[i].onclick = function() { callback(i); };
    })(i); 
}

function callback(i){
  div[i].style.display = 'block';
  if(current) current.style.display = 'none';
  current = div[i];   
}

Do)

var img = document.getElementsByTagName('IMG'),
    div= document.getElementsByTagName('DIV'), 
    current, i;

for(i = 0; i < img.length; i++){
      img[i].onclick = callback.call(this,i);
}

function callback(i){
  return function () {
    div[i].style.display = 'block';
    if(current) current.style.display = 'none';
    current = div[i];   
  };  
}

<!-- HTML -->

<style>
  div {display:none;}
</style>

<img src="01.jpg" alt="" />
<img src="02.jpg" alt="" />
<img src="03.jpg" alt="" />
<img src="04.jpg" alt="" />
<img src="05.jpg" alt="" />

<div>first</div>
<div>second</div>
<div>third</div>
<div>fourth</div>    
<div>fifth</div>

Pracujący jsbin

D) wersja jQuery

(function(){
  var div = $('div'), current;
  $('img').each(function(index){
    $(this).bind ('click', function(){
      $('div:nth(' + index + ')').show();
      if(current) current.hide();
      current = $('div:nth(' + index + ')');
    });
  });
})();

Praca jsbin

0
hex494D49 16 sierpień 2014, 20:38

Nie rozumiem, co próbujesz zrobić z tablicą. Podaj obraz coś odnoszącego się do odpowiedniego elementu, który chcesz być wyświetlany (w przykładzowałem atrybut danych). I podaj nazwę zbiorowej klasy we wszystkich elementach, które zostaną wyświetlone / ukryte.

Następnie kliknij, ukryj wszystko i pokaż ten związany z tym, co zostało kliknięte.

$('img').click(function(){
    $('.somename').hide();
    $('#div-'+$(this).data("number")).show();
});

Zobacz Fiddle: Fiddle

0
Kiee 16 sierpień 2014, 18:57