We Keep Coding

jQuery unable to get data attribute, returns undefined

Using jQuery, I am trying to get the data attribute of the following...
54
var myid = jQuery("active").data("id");
Buit this is giving me an undefined error, where am I going wrong?

Missing "." before class selector. You need to do something like this to get the id attribute:
$(".active").attr("id");
Refer: https://api.jquery.com/attr/

active will select <active> elements, if you want to get elements that have this class name use .active.
Here is an example:
jQuery(".active")

You forgot to use class selector (.) .Moreover Class selector is not suited when you are looking to have multiple elements with same class (it will always return the first element).
var myid = jQuery(".active").data("id");
console.log(myid)
// if you have multiple elements with same class
jQuery(".active").each(function() {
let myid = $(this).data("id");
console.log(myid)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
54
55

var myid = jQuery(".active").data("id");
console.log(myid)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
54
You were missing a "." in the selector - to tell jQuery you are selecting a class.

if you are accessing class then add '.'(dot).
you code would be .
54
var myid = jQuery(".active").data("id");

To find the attribute value of any tag you may use attr() method on the tag. Inside the attr() method you have to pass the custom data tag like data-{attribute-teag-name}
There are four different ways to get the result:
$(document).ready(function(){
var id = $("#custom").attr("data-customid");
console.log("attribute value with id -- ",id);
var id_1 = $(".active").attr("data-customid");
console.log("attribute value with class -- ",id_1);
var id_2 = $(".active").data("customid");
console.log("attribute value with class and data method -- ",id_2);
var id_3 = $("#custom").data("customid");
console.log("attribute value with id and data method -- ",id_3);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
54

There is "." missing before class selector, You can get the data-id attribute value by:
$(".active").attr("data-id");
or
$(".active").data("id");
Getting data- attribute value by class so you have to use "." and by id "#" before the tag-name
Reference:
https://api.jquery.com/attr/
https://www.tutorialspoint.com/jquery/jquery-selectors

You call <active> elements by Jquery("active")
Try
var myid = Jquery(".active").data("id");

Adding and removing a class at the same time as updating a div

I am very new to JavaScript. I am trying to update a div, which works fine before the add and remove class pieces are added. The problem is when I add the class I can't seem to get it to be removed when the when the next image is clicked. I have used a remove class option, but it doesn't seem to want to work.
Any help is appreciated. Here is the code:
$('[class^="question"]').on('click', function(e) {
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('.question*').removeClass('question*selected');
$('#answer' + numb).show();
$('.question' + numb).addClass('question' + numb + 'selected');
});
Here is a link to the Fiddle I am Playing with.
Thanks.

You can keep track of your added class by defining a global variable. I created a working example in CODEPEN.
$(document).ready(function() {
var appliedClass = "container1";
var classNo = 1;
$(".buttonCon").click(function() {
if ($(".container").hasClass(appliedClass)) {
$(".container").removeClass(appliedClass);
classNo++;
if (classNo > 4) {classNo = 1;}
appliedClass = "container" + classNo;
$(".container").addClass(appliedClass);
}
});
});
I have appliedClass variable which keeps tracking of the latest added class. Every time you click on the button with .buttonCon class, this variable will be updated to the new added class. Next time, first we remove the former class. Then we added the new one. The second if statement might not be needed in your case, but in my example, I needed it to keep looping through container1 to container4 classes.

You've set yourself up with a really difficult-to-work-with class structure -- this can be a lot easier than you're making it. Give each of your "question" links the class 'question' and the unique id "question1", "question2", etc. Same for the answer nodes: class "answer" and id "answer1", "answer2" etc.
Now you can easily access all question links with $('.question') or all answers with $('.answer'), and can use the IDs to identify individual nodes as needed:
$('.question').on('click', function(e) {
e.preventDefault();
var numb = this.id.replace('question', '');
var answerNode = $('#answer'+numb);
if (answerNode.hasClass('hide')) {
// the Q they clicked on is not yet visible
$('.answer').addClass('hide'); // hide all answers
answerNode.removeClass('hide'); // show the desired one
} else {
// the Q they clicked on is already visible, so toggle it back off
answerNode.addClass('hide');
}
});
http://jsfiddle.net/647dadtj/

Making part of an Id name into a variable

I have a bunch of divs with matching ids (#idA_1 and #idB_1, #idA_2 and #idB_2, etc). In jquery I wanted to assign click functions, so that when I click an #idA it will show and hide an #idB.
Basically I want to make this:
$(".idA_x").click(function(){
$("idB_x").toggleClass("hide")
});
X would be a variable to make #idA and #idB match. I could write each individually, but that would take too much code, is there a way to make the number in the id into a variable?

Sure, you can do:
var num = 13;
addButtonListener(num);
function addButtonListener(num){
$("#idA_"+num).click(function(){
$("#idB_"+num).toggleClass("hide")
});
}

Try JQuery solution :
var x = 1;
$(".idA_" + x ).click(function(){
$(".idB_" + x ).toggleClass("hide")
});
Hope this helps.

There are many ways to achieve that, but what you probably want is to create a shared CSS class, e.g. .ids, and bind the event listener to that one:
$('.ids').click(function () {
//...
});
Then you can handle your logic in a cleaner way within the function body.

In order to make it dynamic, and not have to repeat the code for each one of your numbers, I suggest doing as follows:
First, add a class to all the div's you want to be clickable .clickable, and then use the id of the clicked event, replacing A with B in order to select the element you what to toggle the class:
$(".clickable").click(function(){
var id = $(this).attr('id');
$("#" + id.replace('A', 'B')).toggleClass("hide");
});
Or, you can also select all divs and use the contains wildcard:
$("div[id*='idA_']").click(function(){
var id = $(this).attr('id');
$("#" + id.replace('A', 'B')).toggleClass("hide");
});
This solution won't have the need to add a class to all clickable divs.

You can use attribute selector begins with to target the id's you want that have corresponding elements.
https://api.jquery.com/attribute-starts-with-selector/
Then get the value after the understore using split on the id and applying Array.pop() to remove the 1st part of the array.
http://jsfiddle.net/up9h0903/
$("[id^='idA_']").click(function () {
var num = this.id.split("_").pop();
$("#idB_" + num).toggleClass("hide")
});
Using regex would be your other option to strip the number from the id.
http://jsfiddle.net/up9h0903/1/
$("[id^='idA_']").click(function () {
var num = this.id.match(/\d+/g);
$("#idB_" + num).toggleClass("hide")
});

Get sibling's name attribute, use it to adjust value of element with equivalent ID

I am trying to set up a system such that when a button is clicked, the value of an input field is adjusted.
The ID of the field to be adjusted is equal to the name of the sibling element of the button.
As such, I'm attempting to code:
On button click
- Get sibling's name
- Get element with ID equal to siblings name
- Change value of that element
Here is my attempt:
$(function() {
$('#values').on('click', '.remField', function() {
var = $(this).siblings().name()
$('#var').val('DELETE');
return false;
});
});
However this does not work.

Your selector creation and retrieval of name is incorrect try:
$('#values').on('click', '.remField', function() {
var name = $(this).siblings().attr('name');
$('#' + name).val('DELETE');
return false;
});
Note that siblings may return multiple items as a collection and attr on a collection will get the name of the 1st item in the collection. If you know it is the next of prev element then better use .next() or .prev() to be more specific. var is a keyword you can't use that as a variable name.

Use .attr()
$('#values').on('click', '.remField', function () {
var name = $(this).siblings().attr('name');
$('#' + name).val('DELETE');
return false;
});
.siblings() will return multiple items

Get the id of the clicked-upon div

I want to select the id of the current div when I click on it in jQuery.
For example, say I have HTML like this:
<div class="item" id="10">hello world</div>
<div class="item_10">hello people</div>
When I click on the first div on .item class, I want to copy the id of the current div + adding to it the number (10), so it will be ("div id" + 10) equal to the second dev class = item_10.
I tried to use currentid = this.id; but it doesnt work :( !

First, note that id attributes starting with numbers are syntactically illegal in HTML4. If you're using id="10" make sure that you're using the HTML5 doctype (<!DOCTYPE html>).
It's hard to say why what you were doing didn't work without seeing your actual code. Presumably it is because you were registering for the event on a higher element (like the body) and this.id was the id of that higher element and not the element you clicked on.
In this case, you want to use the target property of the event to find what you clicked on. For example:
$(document.body).click(function(evt){
var clicked = evt.target;
var currentID = clicked.id || "No ID!";
$(clicked).html(currentID);
})
Seen in action: http://jsfiddle.net/Gra2P/
If you were registering on the specific elements instead, then this.id does work:
$('div').click(function(evt){
var currentID = this.id || "No ID!";
$(this).html(currentID);
})
Seen in action: http://jsfiddle.net/Gra2P/1/
This is sub-ideal, however, because:
It makes many event handler registrations instead of 1, and
If additional divs are added to the document after this code is run, they will not be processed.
Under jQuery 1.7, you use the .on method to create a single event handler on a parent element with selectors for the kinds of elements you want to catch the event on, and have this set to them. In code:
$(document.body).on('click','div',function(evt){
var currentID = this.id || "No ID!";
$(this).html(currentID);
})
Seen in action: http://jsfiddle.net/Gra2P/2/

I think you're trying to do something like:
$(".item").click(function(){
var id = $(this).attr("id");
var el = $(".item_" + id);
});
Now el is your second div.

You can simply use this.id
$('div').click(function() {
var divid = this.id;
alert($('.item_'+divid).html());
});
Demo

Something like this?:
$('div').click(function() {
theId = $(this).attr('id');
//Do whatever you want with theId.
});

This can be done as:
$('.item').click(function() {
var divId = $(this).attr("id");
});