How to read element value from function - javascript

I want to make all elements with class "reaction" react on click and I need to read element value.
in document ready I put
$(".reaction").click(function() {
console.log(this.value);
});
but I cannot read value. How to read element on this way ?

This should work if the matching elements have a "value" attribute:
$(".reaction").click(function() {
console.log($(this).val());
});

You can take attr value in pure element.
http://jsfiddle.net/9Rw2p/2/

Just try this:
$(".reaction").click(function() {
console.log(this.textContent);
});
It works fine for me

Related

Get Specific class with Jquery/ JavaScript

I have got a div containing some html elements. They all have a class named
class="fileItem read write".
But there could be an Element with
class="fileItem read write selected".
Now I want to get this element with the additional 'selected' tag and edit this. Currently I have an in JQuery
$(".fileItem").click(function(){
// Code
});
which detect an click on one of these fileItems.
Here I want to edit style tag of the element with 'selected' tag. So is there something where I can say get all by class and select the on with "selected"?
Just chain the desired class names like you would do in a CSS selector:
$(".fileItem.selected").click(function() {
// do stuff
});'
$(".fileItem").click(function(){
$(this).find('.selected').style('blah','blah')
});
Something like this will allow you to perform other functions as well as the selected item.
$(".fileItem").click(function(e) {
e.preventDefault();
$('.selected').css({
'color': 'green'
});
});
You can simply use this line of code to get the element with the selected class
$(".fileItem.read.write.selected").click(function() {
// code here
});'
You can use
$(".selected").click(function(){});
Use core java script to do this.
function func() {
alert("Hello, world!");
}
document.getElementsByClassName("fileItem read write selected")
[0].addEventListener("click", func, false);
As far as I know you should be able to combine the two classnames:
$(".fileItem.selected").click(function() {
//your actions
});

Jquery: Get attribute value of dynamically created element

I created a div dynamically, and on click event I want to get it's attribute value, but when I try to do that, it throws me an error. "jQuery(...).attr(...).val is not a function", refer my code below
jQuery("#target1").on("click", function(){
jQuery("#target_block").append('`<div id="target2" data-rel-pid="12345">Click Me</div>`');
});
jQuery("#target2").on("click", function(){
var bid=jQuery(this).attr("data-rel-pid").val();
});
Actually the error is in this line :
var bid=jQuery(this).attr("data-rel-pid").val();
There is no need to cal .val() on .attr()
var bid=jQuery(this).attr("data-rel-pid");
.attr() itself will return the value.
For more to this, refer here.
Remove the .val()
jQuery("#target2").on("click", function(){
var bid=jQuery(this).attr("data-rel-pid");
});
As you are already using jQuery and you want to fetch a data attribute you can also do something like this.
$("#target2").on("click", function(){
var bid=$(this).data("rel-pid");
});
As target2 is being appended later in the life cycle of the web page, you need to use event delegation to attach event to dynamically appended elements.
Remove .val(), Use .attr() to get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
Try this:
jQuery("#target1").on("click", function() {
jQuery("#target_block").append('<div id="target2" data-rel-pid="12345">Click Me</div>');
});
jQuery("#target_block").on("click", '#target2', function() {
var bid = jQuery(this).attr("data-rel-pid");
alert(bid);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="target1">target1</div>
<div id="target_block">target_block</div>
You can use this code -
jQuery("#target2").on("click", function(){
var bid = jQuery(this).data("rel-pid");
});

Get elements by data attribute and part of id in jQuery

I need to get elements by data attribute and part of id in jQuery.
I have following code.
<div class="bridgeSelectedDiv" id="bridgeDiv_13234" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>
<div class="bridgeSelectedDiv" id="bridgeDiv_13432" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>
<div class="bridgeSelectedDiv" id="bridgeDiv_45646" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>
function SelectBridgeLine(element) {
var bridgeuid = $(element).attr("data-bridgeuid");
var partofSelectedBridgeLine = $('div[id^="bridgeDiv_"]').data("bridgeuid");
console.log(partofSelectedBridgeLine);
}
But it returns only 1 element not all of them.
Any clue? Thank you!
From the docs of .data()
Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
So whats happening here is it gets the data value for first element only. You need to iterate over them using .each() to get for all elements in matched selector:
$('div[id^="bridgeDiv_"]').each(function(){
console.log($(this).data('bridgeuid'))
});
Demo
It returns only 1 element because you are doing onclick="SelectBridgeLine(this);", and this will always point to current element on which the click handler exists, instead do:
$('.bridgeSelectedDiv').click(function(){
console.log($(this).data('bridgeuid')); //you can use .data()
});
or
$('div[id^="bridgeDiv_"]').click(function() {
console.log($(this).data('bridgeuid'));
});
Try
$('div[id^="bridgeDiv_"]').each(function(){
console.log($(this).data("bridgeuid")); });

How to get the relevant 'this' object in jquery?

here's the snippet of code I have:
$(".block").mouseover(function() {
$("#block_title").html("title"));
});
Each div of class .block has a data-title attribute (value of each data-title attribute is different). I want to be able to access this data-title attribute inside my anonymous function.
You can access it using the .data method:
$(".block").mouseover(function() {
...
$("#block_title").html($(this).data('title'));
});
You can use the .data() function in jQuery
$(".block").mouseover(function() {
$("#block_title").html($(this).data('title'));
});
You may be referring to this code.
$('.block').attr('data-title', 'This is a random value');
According to the jQuery API documentation:
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
I hope this answers your question.
If you mean you have an HTML5 data- attribute:
$(".block").mouseover(function() {
$("#block_title").html( $(this).attr("data-title") ); //data-title value
});
Or, if you mean you have a title property in the jQuery arbitrary data:
$(".block").mouseover(function() {
$("#block_title").html( $(this).data("title") ); //title value in the data object
});

using $(this) jquery to change another element

So, I know how to change an attribute for the same element you hover over...
$(".click2play").mouseover(function()
{
$(this).css({'visibility' : 'hidden'});
});
question Can I do the same thing but to affect another element only within the same 'click2play' div that was hovered?
maybe like?
$(".click2play").mouseover(function()
{
$(this).(#someotherdiv).css({'visibility' : 'hidden'});
});
Thanks everyone!
This code targets a div, within the current .click2play element. I believe that's what you were asking for :)
$(".click2play").mouseover(function() {
$('div.class_name', this).css({'visibility' : 'hidden'});
});
not very clear from the ques what you wanna do so ill ans for all the options i can guess of
1.if you wanna hide all the elements of class .click2Play then use
$('.click2Play').hover(function(){$('.click2play').hide()});
2.if you want to just hide the current element of all the elements having this class use
$('.click2Play').hover(function(){$(this).hide()});
3.if you wanna generalize it then you can use.selector property of the jquery object so that you would be able to use it like
$('.click2Play').hover(function(){$($(this).selector).hide()});
so now if you will change the class name from .click2Play to some other class it will work nicely and will hide all the elements of that class.
4. if you want to hide some element inside that of current element then
$('.click2Play').hover(function(){$(this).children('selector_of_child').hide()});
5.if all the elements of this class have an element inside them having some other class and you wanna hide them all then simple use each like this
$('.click2Play').hover(function(){$('.click2play').each(function(){$(this).children("selector_Of_Child").hide()})});
I would do like this:
$(".click2play").mouseover(function(){
$(this).hide();
});
But maybe it isn't what you want to do?
I suppose this :):
$(".click2play").mouseover(function(){
$(this).css({'visibility' : 'hidden'});
});
or better
$(".click2play").mouseover(function(){
$(this).hide();
});
You want to change some other div? Why would you need $(this)?
$(".click2play").mouseover(function(){
$("#someotherdiv").hide();
});
To change a single css attribute you can do:
$(".click2play").mouseover(function(){
$(this).css('visibility', 'hidden');
});
I hope it helps
(consider to see this link: http://marakana.com/bookshelf/jquery_tutorial/css_styling.html )
I believe most of the answers didn't payed attention to the question, which asks about removing a class. Here is the answer to both questions:
$('.click2play').bind('mouseenter mouseleave', function () {
$(this).removeClass('click2play'); // This line removes the current object's class click2play
$('jQUerySelector').removeClass('click2play'); // This will remove another element's class click2play
});

Categories