Я не уверен, что смогу это сделать, но стоит попробовать.
У меня есть таблица с не менее 10 элементами, поступающими из базы данных Mysql. Это предметы, для которых вы можете делать ставки. Идея состоит в том, что каждая строка (следовательно, каждый элемент) имеет кнопку, которую можно нажать, чтобы ввести ставку. Эта кнопка открывает всплывающее окно с текстовым полем для ввода ставки и кнопкой для отправки формы.
Чтобы определить элемент, на который пользователь предлагает цену, мне нужен его идентификатор, а также сумма ставки. Количество действительно легко получить, но я много разбираюсь с идентификатором элемента.
Вот что я имею:
$(document).ready(function(){
$(".show").click(function() {
$("#popup").show();
var $id = document.getElementsByClassName('show')[0].value;
console.log($id);
$("#jugador").val($id);
});
$("#close, #submit").click(function() {
$("#popup").hide();
});
});
#popup {
position: relative;
z-index: 100;
padding: 10px;
}
.content {
position: absolute;
z-index: 10;
background: #ccc;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 5;
opacity: 0.4;
}
<td><button class="show" id="bid" value="<?php echo $row2["id"];?>"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>
/*Popup*/
<div id="popup" style="display: none;">
<div class="overlay"></div>
<div class="content">
<header>
<div id="close"></div>
</header>
<form name="form1" method="post" action="bid.php">
<fieldset>
<label for="bid">Bid:</label>
<input type="text" name="bidAmount" id="bidAmount" size="8" />
<input type="hidden" name="item" id="item" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
<footer>
<button type="button" id="submit">Bid Now</button>
</footer>
</form>
</div>
</div>
Я пробовал какое-то время без везения. Я всегда получаю идентификатор элемента для первого элемента независимо от того, в какую кнопку я нажимаю.
Возможно ли, что я хочу? Это правильный подход? Должен ли я использовать другой?
Заранее большое спасибо.
Просто измените эту строку:
var $id = document.getElementsByClassName('show')[0].value;
К этому:
var $id = $(this).val();
Проблема в том, что с document.getElementsByClassName('show')[0].value
вы запрашиваете первое вхождение кнопки .show
. С помощью $(this)
вместо этого вы будете получать доступ к текущей нажатой кнопке.
JQuery привязывает события к цели, где вы присоединяете событие, поэтому this
всегда будет ссылкой на цель события. Использование $(this)
создаст объект jQuery целевого элемента, позволяющий применить к этому элементу функции jQuery.
Как побочная заметка, вы не должны дублировать идентификаторы элементов. Каждый идентификатор должен быть уникальным в html-документе, поэтому будет хорошей практикой сделать этот идентификатор разным для каждой кнопки.
Надеюсь, поможет.
Чтобы получить доступ к текущему идентификатору элемента div, вы можете использовать ( $this
), который относится к текущему объекту javascript.
$("div").click(function(){
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">Num 1</div>
<div id="2">Num 2</div>
<div id="3">Num 3</div>
<div id="4">Num 4</div>
Здесь, в этом примере, я создал div, который при нажатии возвращает идентификатор этого div.
Когда вы делаете это так: var $id = document.getElementsByClassName('show')[0].value;
он всегда будет принимать первый элемент, имеющий class="show"
.
Которая будет содержать первый элемент, поэтому всегда дает id
первого элемента.
Поэтому вместо того, чтобы делать это, вы можете сделать это следующим образом:
var $id = $(this).val();
Это выберет текущий элемент, на который пользователь нажал, и даст идентификатор этого элемента.