Получить поле ввода этого элемента

Question

После нажатия на .option-item, я получу тип тега ввода, скрытый от триггера (в JavaScript this).

$("body").on("click", ".option-item", function() { 
 
    $("#resultaatArtisten").css("display", "none"); 
 
    alert(this.$('input[type="hidden"]').val()); 
 
});

.option-list { 
 
    width: 100%; 
 
    height: 200px; 
 
    overflow-y: auto; 
 
    border: solid 1px #A9A9A9; 
 
    margin: 10px 0; 
 
} 
 

 
.option-item { 
 
\t display: flex; 
 
    padding: 5px 10px; 
 
    transition: background-color 0.5s; 
 
    cursor: pointer; 
 
} 
 

 
.option-item:hover { 
 
\t background-color: #1DD75F; 
 
} 
 

 
.artist-foto-container { 
 
    border-radius: 25px; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-right: 5px; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div class="option-item"> 
 
    <input type="hidden" value="123"/> 
 
    <div class="artist-foto-container"> 
 
     <img src="" style="" class="artist-foto" alt="Foto van "/> 
 
    </div> 
 
    <p>name</p> 
 
</div>

Но если дает мне эту ошибку:

Uncaught TypeError:this.$ is not a function

есть какие-то способы, чтобы сделать это?

Answer 1

Вы, наверное, имели в виду:

$(this).find('input[type="hidden"]').val() 

Я вижу ваше мышление, но вы всегда должен спрашивать, что такое контекстуальное значение this есть. В вашем случае, this указывает на щелчок div, т. Е. Объект элемента HTML.

Зная это, очевидно, что экземпляр jQuery, $, не живет под - не является под-объектом - DIV.

Вместо этого, чтобы перейти за пределы, то есть в DIV, вы передаете его в jQuery (чтобы открыть его API jQuery), а затем используйте метод find().

Answer 2

Ваш синтаксис совершенно неверен. Измените строку ниже:

alert(this.$('input[type="hidden"]').val()); 

To:

alert($(this).find('input[type="hidden"]').val()); 

Answer 3

$("body").on("click", ".option-item", function() { 
    $("#resultaatArtisten").css("display", "none"); 
    alert($(this).find('input[type="hidden"]').val()); 
}); 

Надеется, что это будет работать