3

div 内の画像がクリックされたときに、div を非表示にしてから次の div を表示しようとしています。もう一度クリックすると、その div が非表示になり、次の div がロードされます。

以下は機能しますが、きれいではないことに注意してください。インラインJavaScriptを使用せずにこれを行うより良い方法は何ですか?

また、divを非表示にして次のダイビングを表示する「次へ」ボタンを追加しようとしています...ユーザーはa hrefdivをクリックせずに次のアイテムをロードできます。

ありがとう！

function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

体...

<div id = "div1" style="display:block" onclick = "replace('div1','div2')"><a href="link1.html" target="_blank"><img src="images/a.jpg"></a></div>
<div id = "div2" style="display:none" onclick = "replace('div2','div3')"><a href="link2.html" target="_blank"><img src="images/b.jpg"></a></div>
<div id = "div3" style="display:none" onclick = "replace('div3','div4')"><a href="link3.html" target="_blank"><img src="images/c.jpg"></a></div>
<div id = "div3" style="display:none" onclick = "replace('div4','div5')"><a href="link4.html" target="_blank"><img src="images/.jpg"></a></div>
...
4

5 に答える 5

2

デモ jsBin

しかし、クリック後に画像を「前進」させたい場合はa、他のページにリンク可能な要素内に画像をラップするのはなぜtarget="_blank"ですか?

その間、簡略化された HTML は次のとおりです。

<div id="gallery">  
  <a href="link1.html" target="_blank"><img src="img1.jpg"></a>
  <a href="link2.html" target="_blank"><img src="img2.jpg"></a>
  <a href="link3.html" target="_blank"><img src="img3.jpg"></a>
  <a href="link4.html" target="_blank"><img src="img4.jpg"></a>  
</div>

...そして、このいくつかの jQ/javascript 行:

var i = 0;                       // set desired starting one // zero based                         
var N = $('#gallery >*').length; // get number of childrens

function advance(){
    $('#gallery >*').hide().eq(i++%N).show();
}
advance();

$('#next').click( advance );

このスクリプトを使用すると、画像をクリックして関数を簡単にトリガーすることもできますが、関数内で使用してクリック動作をadvance防止する必要があります。anchorreturn false

クリック可能な画像を含む jsBin デモ

var i = 0;                            
var N = $('#gallery >*').length;

function advance(){
  $('#gallery >*').hide().eq(i++%N).show();
  return false;   // remove that line to make the gallery advance but the same time go to the desired link-page
}
advance();

$('#next, #gallery >*').click( advance ); // comma separate the elements that will trigger the function

より「派手な」効果が必要な場合は、次のようにします。

フェード効果のあるjsBinのデモ

コード：

var i = 0;                            
var N = $('#gallery >*').length;

$('#gallery >*').hide().eq(i++%N).show(); // the initial adjustment (on DOM ready)

function advance(){
  $('#gallery >*').stop().fadeTo(900,0).eq(i++%N).stop().fadeTo(900,1);
}

$('#next, #gallery >*').click( advance );    // trigger the fade advance/effect function
于 2012-05-21T21:55:19.740 に答える
1

jQueryがオプションのように見えることを考えると、私はお勧めします：

$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();
        var that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
    });​​​​​​​​​​​

JS フィドルのデモ。

以下のOPからのコメントに応じて編集されました。

とにかくこれを行うには、画像をクリックすると a href target=_blank が機能しますか?

そうですね。しかし、あなたが望むのは、 をクリックすることに応答して新しいウィンドウを開くことだけであると仮定するとa(そして、そのウィンドウをそのhrefから に開くことa)、次のように単純に使用しますwindow.open()。

$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();
        var newWin = window.open(this.href,'newWindow'),
            that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
    });​

JS フィドルのデモ。

Roko の「ループがいいだろう」というコメントに従って、スクリプトを少し改善するために編集しました (最初は誤解していましたが、単に失敗/停止するのではなく、最後の画像から最初の画像に移動するつもりだったと思います):

$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();        
        var newWin = window.open(this.href,'newWin'),
            that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
        else {
            that.fadeOut(duration,
                         function(){
                             that.prevAll('div:last').fadeIn(duration);
                         });
        }
    });​

JS フィドルのデモ。

参考文献:

于 2012-05-21T21:45:41.647 に答える
0

リンクが機能し、新しいページに選択した画像が表示されることを何とか期待していますか?

そうでない場合:

var elems = $('div[id^="div"]');
elems.not(':first').hide();

elems.on('click', function(e) {
    e.preventDefault();
    elems.hide();
    $(this).next().show();
});

HTML

<div id="div1"><a href="link1.html" target="_blank"><img src="images/a.jpg"></a></div>
<div id="div2"><a href="link2.html" target="_blank"><img src="images/b.jpg"></a></div>
<div id="div3"><a href="link3.html" target="_blank"><img src="images/c.jpg"></a></div>
<div id="div4"><a href="link4.html" target="_blank"><img src="images/.jpg"></a></div>​​​​​​​​​​​​​​​​​​​​
于 2012-05-21T21:38:45.393 に答える
0

また、同時に2つの機能を使用できます

<script>
function hideMeShowNext( element )
{
element.style.display = 'none'
element.nextSibling.style.display = 'block'
}
</script>

then render this anywhere in your page//you can change <A> to <Div>
<a href="" onclick="hideMeShowNext('first');hideMeShowNext('second');">Click Me</a>

うまくいかない場合は、使用してください

<script type="text/javascript">
function myfnction() {
hideMeShowNext('first');
hideMeShowNext('second');
}
</script>

<a href="" onclick="myfunction();"> blabla </a>
于 2013-03-26T12:01:07.103 に答える
0

すべての div にonclick="hideMeShowNext(this)"

関数を定義します

<script>

function hideMeShowNext( element )
{

element.style.display = 'none'
element.nextSibling.style.display = 'block'

}

</script>
于 2012-05-21T21:22:38.147 に答える