Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2019, 20:08
Новичок на форуме
Отправить личное сообщение для ArtiOnMoon Посмотреть профиль Найти все сообщения от ArtiOnMoon
 
Регистрация: 02.04.2019
Сообщений: 8

Кнопки на javascript вместо checkbox
В постбите у каждого пользователя на форуме есть скрытый div, который раньше открывался и закрывался с помощью checkbox, однако, было принято решение заменить все это дело на кнопки через js. Столкнулся со следующей проблемой: кнопка работает, но только в самом первом сообщении темы, а далее отказываться напрочь работать. Как это исправить?

<script>
function myFunction() {
  var x = document.getElementById("hidden");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>


<button onclick="myFunction()", class="abilitybutton">Способности</button>

<div id="hidden">

<xf:set var="$viewableItems" value="{{ dbtech_shop_viewable_items($user) }}" />

<xf:if is="$viewableItems AND $xf.options.dbtech_shop_items_postbit.0">
	<xf:foreach loop="$viewableItems" value="$itemInfo">
		<xf:if is="$xf.options.dbtech_shop_enablegiftgiver AND $itemInfo.purchase.gifted">
			<xf:if is="$itemInfo.purchase.message is not empty">
				<xf:set var="$title_extra" value="{{ phrase('dbtech_shop.gift_received_x_from_y_message', {
												  'user': $itemInfo.buyer,
												  'message': $itemInfo.purchase.message
												  }) }}" />
			<xf:else />
				<xf:set var="$title_extra" value="{{ phrase('dbtech_shop.gift_received_x_from_y', {
												  'user': $itemInfo.buyer
												  }) }}" />
			</xf:if>
		<xf:else />
			<xf:set var="$title_extra" value="" />
		</xf:if>
		<a href="{{ link('dbtech-shop/item', {'id': $itemInfo.purchase.itemid, 'title': $itemInfo.purchase.title}, {'shopid': $itemInfo.purchase.shopid}) }}" data-xf-click="overlay"><img src="{$itemInfo.purchase.icon}" alt="{$itemInfo.purchase.title}" title="{$itemInfo.purchase.title}:  {$itemInfo.purchase.description|raw}" style="padding:1px;" /></a>
	</xf:foreach>	
</xf:if>
</div>


Раньше работало так
<input type="checkbox" id={$post.post_id} style="display:none;">
<div id="hidden">

<xf:set var="$viewableItems" value="{{ dbtech_shop_viewable_items($user) }}" />


<xf:if is="$viewableItems AND $xf.options.dbtech_shop_items_postbit.0">
	<xf:foreach loop="$viewableItems" value="$itemInfo">
		<xf:if is="$xf.options.dbtech_shop_enablegiftgiver AND $itemInfo.purchase.gifted">
			<xf:if is="$itemInfo.purchase.message is not empty">
				<xf:set var="$title_extra" value="{{ phrase('dbtech_shop.gift_received_x_from_y_message', {
												  'user': $itemInfo.buyer,
												  'message': $itemInfo.purchase.message
												  }) }}" />
			<xf:else />
				<xf:set var="$title_extra" value="{{ phrase('dbtech_shop.gift_received_x_from_y', {
												  'user': $itemInfo.buyer
												  }) }}" />
			</xf:if>
		<xf:else />
			<xf:set var="$title_extra" value="" />
		</xf:if>
		<a href="{{ link('dbtech-shop/item', {'id': $itemInfo.purchase.itemid, 'title': $itemInfo.purchase.title}, {'shopid': $itemInfo.purchase.shopid}) }}" data-xf-click="overlay"><img src="{$itemInfo.purchase.icon}" alt="{$itemInfo.purchase.title}" title="{$itemInfo.purchase.title}:  {$itemInfo.purchase.description|raw}" style="padding:1px;" /></a>
	</xf:foreach>	
</xf:if>
</div>
<label for={$post.post_id}> Способности</label>
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2019, 20:25
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,654

document.getElementById("hidden") - и если следующие темы имеют такие же элементы с этим id, то причина в этом, id должно быть уникально.
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2019, 21:00
Новичок на форуме
Отправить личное сообщение для ArtiOnMoon Посмотреть профиль Найти все сообщения от ArtiOnMoon
 
Регистрация: 02.04.2019
Сообщений: 8

Сообщение от laimas Посмотреть сообщение
document.getElementById("hidden") - и если следующие темы имеют такие же элементы с этим id, то причина в этом, id должно быть уникально.
Окей, ясно, но как это исправить?
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2019, 21:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,654

Ну как:

а) каждый div имеет свой id, а кнопки передают в функцию (обработчик) их id

б) отказаться от id вообще, а обработчик в общем родителе для кнопки и div ищет div и выполняет операцию.

Выбирайте.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Требуется javascript ninja для небольшой задачи Achilles_sm Работа 7 01.07.2015 17:33
Бесплатный курс JavaScript (18 уроков)  Bokal Учебные материалы 2 16.11.2014 19:20
Интерпретатор Java на JS kobezzza Оффтопик 24 11.10.2012 17:32
JavaScript client и server side игры Москва 110 000 Yanazavr Работа 0 25.03.2012 13:16
JavaScript на Яндекс.Фотки - почему тормозит браузеры? ZavFirefox Javascript под браузер 23 27.09.2009 18:24