Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Забрать id у определённого class (https://javascript.ru/forum/css-html/57733-zabrat-id-u-opredeljonnogo-class.html)

CaptainAlexander 17.08.2015 10:15

Забрать id у определённого class
 
Задача: забрать Id у элемента с определённым Class, и занести его в переменную для дальнейшего использования.

Имеются, к примеру, 10 кнопок.
Каждая имеет одинаковый Class, но разные ID.
При нажатии на кнопку должен срабатывать скрипт с определённым class, и выдирать ID с кнопки для дальнейшего использования.

Как реализовано у меня (неудобная и громоздкая версия).
Сначала я обращаюсь кнопкой к скрипту для выдирания со страницы list.html определённый div c тем же ID.

Форма html:
<form>
<input id="1seriya" type="button" value="1"><br>
<input id="2seriya" type="button" value="2"><br>
<input id="3seriya" type="button" value="3"><br>
<input id="4seriya" type="button" value="4"><br>
<input id="5seriya" type="button" value="5"><br>
<input id="6seriya" type="button" value="6"><br>
<input id="7seriya" type="button" value="7"><br>
<input id="8seriya" type="button" value="8"><br>
<input id="9seriya" type="button" value="9"><br>
<input id="10seriya" type="button" value="10"><br>
<input id="11seriya" type="button" value="11"><br>
<input id="12seriya" type="button" value="12"><br>
<input id="13seriya" type="button" value="13"><br>
<input id="14seriya" type="button" value="14"><br>
<input id="15seriya" type="button" value="15"><br>
<input id="16seriya" type="button" value="16"><br>
<input id="17seriya" type="button" value="17"><br>
<input id="18seriya" type="button" value="18"><br>
<input id="19seriya" type="button" value="19"><br>
</form>


JQuery скрипт:
$('#1seriya').click(function() {$("#ds").load("test/list.html #1seriya");});
$('#2seriya').click(function() {$("#ds").load("test/list.html #2seriya");});
$('#3seriya').click(function() {$("#ds").load("test/list.html #3seriya");});
$('#4seriya').click(function() {$("#ds").load("test/list.html #4seriya");});
$('#5seriya').click(function() {$("#ds").load("test/list.html #5seriya");});
$('#6seriya').click(function() {$("#ds").load("test/list.html #6seriya");});
$('#7seriya').click(function() {$("#ds").load("test/list.html #7seriya");});
$('#8seriya').click(function() {$("#ds").load("test/list.html #8seriya");});
$('#9seriya').click(function() {$("#ds").load("test/list.html #9seriya");});
$('#10seriya').click(function() {$("#ds").load("test/list.html #10seriya");});
$('#11seriya').click(function() {$("#ds").load("test/list.html #11seriya");});
$('#12seriya').click(function() {$("#ds").load("test/list.html #12seriya");});
$('#13seriya').click(function() {$("#ds").load("test/list.html #13seriya");});
$('#14seriya').click(function() {$("#ds").load("test/list.html #14seriya");});
$('#15seriya').click(function() {$("#ds").load("test/list.html #15seriya");});
$('#16seriya').click(function() {$("#ds").load("test/list.html #16seriya");});
$('#17seriya').click(function() {$("#ds").load("test/list.html #17seriya");});
$('#18seriya').click(function() {$("#ds").load("test/list.html #18seriya");});
$('#19seriya').click(function() {$("#ds").load("test/list.html #19seriya");});


Как видно, что в зависимости от кол-ва серий код будет расти, и поэтому нужно сократить код до минимума.

Например:
JQuery скрипт:
var seriya = [ID нажатой клавиши];
$('.lorem').click(function() {$("#ds").load("test/list.html seriya");});


Помогите мне, пожалуйста :3

Rise 17.08.2015 12:01

CaptainAlexander, где class не вижу?

CaptainAlexander 17.08.2015 12:48

Цитата:

Сообщение от Rise (Сообщение 384552)
CaptainAlexander, где class не вижу?

Я написал, как реализовано у меня.
С class html каркас должен выглядеть примерно так:
<form>
<input id="1seriya" class="lorem" type="button" value="1"><br>
<input id="2seriya" class="lorem" type="button" value="2"><br>
<input id="3seriya" class="lorem" type="button" value="3"><br>
<input id="4seriya" class="lorem" type="button" value="4"><br>
<input id="5seriya" class="lorem" type="button" value="5"><br>
<input id="6seriya" class="lorem" type="button" value="6"><br>
<input id="7seriya" class="lorem" type="button" value="7"><br>
<input id="8seriya" class="lorem" type="button" value="8"><br>
<input id="9seriya" class="lorem" type="button" value="9"><br>
<input id="10seriya" class="lorem" type="button" value="10"><br>
<input id="11seriya" class="lorem" type="button" value="11"><br>
<input id="12seriya" class="lorem" type="button" value="12"><br>
<input id="13seriya" class="lorem" type="button" value="13"><br>
<input id="14seriya" class="lorem" type="button" value="14"><br>
<input id="15seriya" class="lorem" type="button" value="15"><br>
<input id="16seriya" class="lorem" type="button" value="16"><br>
<input id="17seriya" class="lorem" type="button" value="17"><br>
<input id="18seriya" class="lorem" type="button" value="18"><br>
<input id="19seriya" class="lorem" type="button" value="19"><br>
</form>


Но вопрос остаётся вопросом: вытащить из input с классом lorem id, и присвоить его переменной var seriya.
Как это реализовать?

рони 17.08.2015 13:11

CaptainAlexander,
$('.lorem').click(function() {$("#ds").load("test/list.html #"+this.id)});

CaptainAlexander 17.08.2015 13:52

рони,
огромное спасибо!


Часовой пояс GMT +3, время: 13:43.