querySelectorAll (список) получить конкретные значения внутри каждого объекта, нажав

Question

querySelectorAll (список) получить конкретные значения внутри каждого объекта, нажав

PHP-способ сделать это - использовать функцию parse_url, которая анализирует URL-адрес и возвращает его компоненты. Включая строку запроса.

Пример:

$url = 'www.mysite.com/category/subcategory?myqueryhash';
echo parse_url($url, PHP_URL_QUERY); # output "myqueryhash"

Полная документация здесь

1

javascript html

задан F.Charlie67 16 January 2019 в 18:31

4 ответа

Другие вопросы по тегам:

javascript html

Похожие вопросы:

score 0 · Answer 1

Удалите for loop и используйте метод forEach () , чтобы добавить прослушиватель щелчков для каждого элемента и извлечь textContent из каждого figcaption внутри элемента .

Проверьте и выполните следующий фрагмент кода для практического примера того, что я описал выше:

function hello(d) { alert("" + d) }

var images = document.querySelectorAll('.block-image_carousel-single > figcaption');

images.forEach(image => {
  image.addEventListener('click', function(e) {
    e.preventDefault();
    hello(image.textContent);
  }, false);
});

<div class="block-image_carousel">
  <div>
    <div class="block-main-image_carousel-display">
      <img src="https://picsum.photos/1000/200" class="block-image_carousel-display">
      <figcaption> Image 1 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 1 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 2 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 3 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 4 </figcaption>
    </div>
  </div>
</div>

score 0 · Answer 2

Ваш код перезаписывает переменную «Images» в цикле for, и только последний экземпляр цикла сохраняется в изображениях. Также вы определили изображения дважды?

Попробуйте изменить код так:

   function hello(f,d)
{
alert(f,d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {

Images[i].addEventListener('click', function (event) { 
event.preventDefault();

hello(this, Images.textContent);
},false);
}

score 0 · Answer 3

Попробуйте это

function hello(f,d)
{
    alert(f,d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');

for (var i = 0; i < Images.length; i++) {

    var Image = Images[i];

    Image.addEventListener('click', function (event) {  

        event.preventDefault();

        hello(this, Image.textContent);
    }, false);
}

score 0 · Answer 4

Ваша проблема связана с областью видимости переменной: когда цикл for заканчивается, переменная содержит последнее значение.

Вы можете использовать this.textContent в обработчике событий вместо Image.textContent . Или вы можете использовать let вместо var в цикле for. Другой способ решить эту проблему с помощью IIFE

function hello(d) {
    alert("" + d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {
    var Image = Images[i];
    Image.addEventListener('click', function (event) {
        event.preventDefault();
        hello(this.textContent);
    }, false);
}

//
// ...loop using let
//
for (let i = 0; i < Images.length; i++) {
    var Image = Images[i];
    Image.addEventListener('click', function (event) {
        event.preventDefault();
        hello(Images[i].textContent);
    }, false);
}

<div class="block-image_carousel">
    <div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png" class="block-image_carousel-display">
            <figcaption> Image 0 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 1 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 2 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 3 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 4 </figcaption>
        </div>
    </div>
</div>