Немного усложнить простой скрипт

CatinTheBread · [+2 27.05.13]

Всем джамбо. Есть такой нехитрый код

Цитата:

Отсюда вопрос.
Как засунуть сюда еще кнопки?...неопределенное количество.

Zebestov · 23.05.2013, 15:07

Код:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script> 
    $(document).ready(function($){ 
        $("button").click(function () { 
            alert(this.children[0].innerText); // так можно узнать, кого клацнули
            $("#ToggleP").slideToggle("slow"); 
        }); 
    }); 
</script> 

<style> 
    td { padding: 0px 10px 0px 10px; }
</style> 

<button><font size='3'>Реставрация</font></button>
<button><font size='3'>Батон</font></button>
<button><font size='3'>Еще батон!</font></button>
<div style='width:1px; height:1px;'>
    <table id='ToggleP' style='display:none;'><tbody><tr><td><img><img><img></td></tr></tbody></table>
</div>

Sync · 23.05.2013, 15:10

<button><font size='3'>xxx</font></button>
странный какой вопрос

CatinTheBread · [+2 27.05.13]

хм...а есть код без выскакивающего окошка (Подтверждения действия) ? ))
и чтобы каждой кнопке соответствовал свой блок чтоли в котором лежат картинки?
заранее спасибо

Цитата:

<button><font size='3'>xxx</font></button>
странный какой вопрос

Да это на скорую руку...не обращайте внимания

Zebestov · 23.05.2013, 15:40

Цитата:

Сообщение от CatinTheBread

хм...а есть код без выскакивающего окошка?

Прости, я думал, ты хоть немножко в материале, ведь alert() был приведен лишь для примера того, как определять, какую кнопку нажали.

Код:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script> 
    $(document).ready(function($){ 
        $("button").click(function () {
            var txt = this.children[0].innerText;
            if (txt == "Реставрация")
            {
                // делаем то, что нужно для кнопки "Реставрация"
            }
            else if (txt == "Батон")
            {
                // делаем то, что нужно для кнопки "Батон"
            }
            else if (txt == "Еще батон!")
            {
                // делаем то, что нужно для кнопки "Еще батон!"
            }
        }); 
    }); 
</script> 

<style> 
    td { padding: 0px 10px 0px 10px; }
</style> 

<button><font size='3'>Реставрация</font></button>
<button><font size='3'>Батон</font></button>
<button><font size='3'>Еще батон!</font></button>
<div style='width:1px; height:1px;'>
    <table id='ToggleP' style='display:none;'><tbody><tr><td><img><img><img></td></tr></tbody></table>
</div>

CatinTheBread · [+2 27.05.13]

Uncaught TypeError: Cannot read property 'msie' of undefined dddd:201
Uncaught TypeError: Property '$' of object [object Object] is not a function dddd:113

Подскажите что это за ошибки?

Sync · 23.05.2013, 18:19

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

CatinTheBread · [+2 27.05.13]

Вот страничка, гляньте пжлста почему не пашет(( http://osobniak.com/123-2
вот код

Код:

<script> 
    $(document).ready(function($){ 
        $("button").click(function () {
            var txt = this.innerText;
            if (txt == "Реставрация")
            {
              $("#ToggleRestavration").slideToggle("slow");
            }
            else if (txt == "Батон")
            {
              $("#ToggleBaton").slideToggle("slow");
            }
            else if (txt == "Еще батон!")
            {
               $("#ToggleElseBaton").slideToggle("slow");
            }
        }); 
    }); 
</script> 


<style> 
    td { padding: 0px 10px 0px 10px; }
</style> 

<button>Реставрация</button>
<div  style='display:none;' id='ToggleRestavration' style='width:1px; height:1px;'>
<table><tbody><tr><td>
<a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3-150x150.jpg" alt="лицензии архистудио3" width="150" height="150" class="alignnone size-thumbnail wp-image-352" /></a><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио2.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио2-150x150.jpg" alt="лицензии архистудио2" width="150" height="150" class="alignnone size-thumbnail wp-image-351" /></a><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио1.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио1-150x150.jpg" alt="лицензии архистудио1" width="150" height="150" class="alignnone size-thumbnail wp-image-350" /></a>
</td></tr></tbody></table></div>
</div>

<button>Батон</button>
<div id='ToggleBaton' style='width:1px; height:1px;'>
<table style='display:none;'><tbody><tr><td><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3-150x150.jpg" alt="лицензии архистудио3" width="150" height="150" class="alignnone size-thumbnail wp-image-352" /></a><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио2.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио2-150x150.jpg" alt="лицензии архистудио2" width="150" height="150" class="alignnone size-thumbnail wp-image-351" />
</a></td></tr></tbody></table></div>
<button>Еще батон!</button>
<div id='ToggleElseBaton' style='width:1px; height:1px;'>
   <table style='display:none;'><tbody><tr><td><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3-150x150.jpg" alt="лицензии архистудио3" width="150" height="150" class="alignnone size-thumbnail wp-image-352" /></a>
</td></tr></tbody></table></div>

NikolyA · 27.05.2013, 15:29

пожалей форумчан, оформи код тегами, а то в твоей ленте даже не хочется разбераться

CatinTheBread · [+2 27.05.13]

омг да тут вроде кроме script'a да <div id='...'> смотреть особо больше не на что...

Код:

<script> 
$(document).ready(function($){ 
$("button").click(function () {
var txt = this.innerText;
if (txt == "Реставрация")
{
$("#ToggleRestavration").slideToggle("slow");
}
else if (txt == "Батон")
{
$("#ToggleBaton").slideToggle("slow");
}
else if (txt == "Еще батон!")
{
$("#ToggleElseBaton").slideToggle("slow");
}
}); 
}); 
</script> 

<style> 
td { padding: 0px 10px 0px 10px; }
</style> 

<button>Реставрация</button>
<div style='display:none;' id='ToggleRestavration' style='width:1px; height:1px;'>
<table><tbody><tr><td>
<a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3-150x150.jpg" alt="лицензии архистудио3" width="150" height="150" class="alignnone size-thumbnail wp-image-352" /></a><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио2.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио2-150x150.jpg" alt="лицензии архистудио2" width="150" height="150" class="alignnone size-thumbnail wp-image-351" /></a><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио1.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио1-150x150.jpg" alt="лицензии архистудио1" width="150" height="150" class="alignnone size-thumbnail wp-image-350" /></a>
</td></tr></tbody></table></div>
</div>

<button>Батон</button>
<div id='ToggleBaton' style='width:1px; height:1px;'>
<table style='display:none;'><tbody><tr><td><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3-150x150.jpg" alt="лицензии архистудио3" width="150" height="150" class="alignnone size-thumbnail wp-image-352" /></a><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио2.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио2-150x150.jpg" alt="лицензии архистудио2" width="150" height="150" class="alignnone size-thumbnail wp-image-351" />
</a></td></tr></tbody></table></div>
<button>Еще батон!</button>
<div id='ToggleElseBaton' style='width:1px; height:1px;'>
<table style='display:none;'><tbody><tr><td><a href="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3.jpg"><img src="http://6.arhis.z8.ru/wp-content/uploads/2013/05/лицензии-архистудио3-150x150.jpg" alt="лицензии архистудио3" width="150" height="150" class="alignnone size-thumbnail wp-image-352" /></a>
</td></tr></tbody></table></div>