Используя JQuery, как показать и скрыть событие onClick другого div - PullRequest
Новая
       60

Используя JQuery, как показать и скрыть событие onClick другого div

5 голосов
/ 27 мая 2009

Я хотел бы показать div на основе события Onclick ссылки.

Первый клик - Показать div1
Второй щелчок - скрыть оставшиеся div и показать div2
Третий щелчок - скрыть оставшиеся div и показать div3
Четвертый щелчок - скрыть оставшиеся элементы div и показать div1 => повторить цикл и продолжить ..

Код следует: 

<div class="toggle_button">
      <a href="javascript:void(0);" id="toggle_value">Toggle</a>
</div>


<div id='div1' style="display:none;"> 
  <!-- content -->
</div>

<div id='div2' style="display:none;"> 
  <!-- content -->
</div>

<div id='div3' style="display:none;"> 
  <!-- content -->
</div>

Код запроса: 

$(document).ready(function() {
        $("#toggle_value").click(function(){
           $("#div1").show("fast");
           $("#div2").show("fast");
           $("#div3").show("fast");
        });
});

Приведенный выше код показывает все элементы div при первом щелчке, но при первом щелчке он должен отображаться как указано.

Ответы [ 12 ]

5 голосов
/ 27 мая 2009

Я попробую свой выстрел.

EDIT: Однако после второго, чтобы избежать использования глобальной переменной, лучше сделать следующее 

$(document).ready(function() {
        $("#toggle_value").click((function(){
        var counter = 0;
        return function()
        {
           $("#div" + counter).hide("fast");
           counter = (counter % 3) + 1;
           $("#div" + counter).show("fast");
        }
        })());
});
1 голос
/ 27 мая 2009

Как насчет этого

Рабочий пример здесь - добавьте / edit к URL для редактирования кода 

$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'

$(function() {

  var counter = 1;

  $('#toggle_value').click(function() {
    $('div','#container')
      // to stop current animations - clicking really fast could originally
      // cause more than one div to show 
      .stop() 
      // hide all divs in the container
      .hide() 
      // filter to only the div in question
      .filter( function() { return this.id.match('div' + counter); })
      // show the div 
      .show('fast');

    // increment counter or reset to 1 if counter equals 3
    counter == 3? counter = 1 : counter++; 

    // prevent default anchor click event
    return false; 

  });

});

и HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">

    body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
    .display { width:300px; height:200px; border: 2px solid #000; }
    .js .display { display:none; }

</style>
</head>
<body>
<div class="toggle_button">
      <a href="#" id="toggle_value">Toggle</a>
</div>
<br/>
<div id='container'>
    <div id='div1' class='display' style="background-color: red;"> 
        div1
    </div>

    <div id='div2' class='display' style="background-color: green;"> 
        div2
    </div>

    <div id='div3' class='display' style="background-color: blue;"> 
        div3
    </div>
<div>

</body>
</html>

Это можно легко обернуть в плагин

1 голос
/ 27 мая 2009

Вы должны добавить счетчик в функцию. 

$(document).ready(function() {
    var count = 0;

    $("#toggle_value").click(function(){
        if (count == 0) {
            $("#div1").show("fast");
            $('#div2').hide();
            count++;
        }
        else if (count == 1) {
            $("#div2").show("fast");
            ...
            count++;
        }
        else if (count == 2) {
            $("#div3").show("fast");
            ....
            count++;
        }
        else {
             $('div').hide();
             count=0;
        }
    });
});
0 голосов
/ 01 марта 2013 
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
    if (temp1 == 0)  {
        $('#' + temp).hide();
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 1;
        }
        else{
        $('#' + temp).hide();   
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 0;
        }
});
</script>
0 голосов
/ 04 августа 2012

Сначала необходимо добавить базовый файл запроса: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Затем вы должны добавить следующий код: 

<script type="text/javascript">
    $(document).ready(function () {
        $("#hide").click(function(){
            $(".slider_area").hide(1000);
            $("#show").css("display","block");
            $("#hide").css("display","none");
        });
        $("#show").click(function(){
            $(".slider_area").show(1000);
            $("#show").css("display","none");
            $("#hide").css("display","block");
        });
    });
</script>

Добавьте приведенный выше код в заголовочную часть, а код ниже в основной части. 

<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />

Код готов для другого изображения. Нажмите, чтобы показать и скрыть div.

0 голосов
/ 27 мая 2009 
$("#toggle_value").click(function()
{
   $("#div" + (++c) % 3).show().siblings().hide();        
}
0 голосов
/ 27 мая 2009

Функция .toggle в jQuery принимает любое количество функций аргументов, поэтому проблема уже решена. См. Документы в разделе «События».

0 голосов
/ 27 мая 2009

Я предпочитаю использовать метод «фильтра» и немного упростить работу со счетчиком: 

(function () {
    var divCounter = 0, divs;

    $(function () {
        divs = $('#div1, #div2, #div3');
        $('#toggle_value').click(function (e) {
            divs.hide() // hide other divs
                .filter(function (index) { return index == divCounter % 3; }) // select appropriate div
                .show('fast'); // and show it

            divCounter++;
        });
    });

})();
0 голосов
/ 27 мая 2009

Я бы, вероятно, сделал что-то вроде: (ниже предполагается, что все ваши <div> находятся в контейнере с идентификатором "контейнер") 

$(document).ready(function() {
  var $allDivs = $("#container > div");
  var counter = 0;

  $("#container > div").click(function(){
    counter = counter < $allDivs.length - 1 ? counter + 1 : 0;
    $allDivs.not(":eq("+counter +")").hide("fast");
    $allDivs.eq(counter).show("fast");
  });
});
0 голосов
/ 27 мая 2009 
var c = 1;
$("#toggle_value").click(function()
{
   $("#div" + c).hide("fast");        
   $("#div" + ++c).show("fast");
   if (c > 3) c=1;       
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...