Add a new class to an element located in a separate div using JavaScript

$(document).ready(function() { 
   
    $('.btn').click(function() {
        $(this).parent().addClass('show');
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="row">
       <h4 id="txt1">Bookmark 1</h4>
       <a href="#" class="bokmarksave"> <img src="https://vignette.wikia.nocookie.net/secondlife/images/2/2b/Box.png/revision/latest?cb=20120226073326" class="hidden" width="100"></a>
      <p> Lorem Ipsum is simply dummy text of the printing and </p>
       <p class="page_num">Page 3 </p>
   </div>
   <div class="bookmark_icon"> 
      <a href="#"><img src="http://www.pngall.com/wp-content/uploads/2016/05/Click-Here-PNG-Images.png" width="100"class="btn"></a> 
   </div>
</div>

Upon clicking the image labeled "click here" with the class ".btn", my intention is to assign a class ".show" to the hidden image that resides within it. Although I attempted this using jQuery, I was only able to add the class to its parent element.

javascriptjqueryhtmlcss

Answer №1

Check out this solution:

$(this).closest('.box').find('.invisible').addClass('reveal');

For a more effective approach, consider adding data- attributes to the necessary elements in your HTML and utilizing them for navigation. For example:

$(this).closest('[data-container]').find('[data-image]').addClass('display');

Note: Following @sheriffderek's advice, it may be beneficial to remove the invisible class instead or in addition.

Answer №2

Here is the JS code snippet that you can utilize:

$('.btn').on('click', function() {

  $('.hidden').toggleClass('visible');

});

To target the image with the 'hidden' class, you can simply use $(".hidden").

Answer №3

The main container of the image is the anchor element. Shifting the styling from the button class to the anchor element will not affect its functionality.

Answer №4

For this particular scenario, you have the option to directly focus on the element that has been assigned the hidden class by utilizing the corresponding jQuery selector.

$(document).ready(function() { 
    $('.btn').click(function() {
       $('.hidden').toggleClass('show');
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage variable as an expression when utilizing ng-include

Here is an example of working code: <div ng-include src="'Test.html'"></div> However, this code does not work: <div ng-include src="ctrl.URL"></div> (When ctrl.URL is set to "Test.html"). I have also tried setting it t ...

javascripthtmlangularjsdirective

What could be causing the post method to fail in this AngularJS example?

After successfully reading a JSON file in my sample code, I encountered an issue when trying to update the JSON file. The error message "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)" appeared, even though the data ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

Displaying the usernames of the users on the interface leads to encountering the 'Undefined Index' error

Hey there, I'm currently facing an issue with displaying the user's first name as a greeting message on index.php. I want it to say 'Hello, (user's first name)', but since I'm fairly new to PHP, I'm struggling to make it ...

phphtmlmysqlphpmyadminxampp

Distinguishing between a regular JavaScript variable and one annotated with a dollar sign

Many responses have addressed the question of using a dollar sign in JavaScript variables. In essence, the dollar sign functions as an identifier in JavaScript variables. However, I am curious if there are other distinctions between regular variables and ...

javascript

Getting data from an Ajax call

I am struggling to find a solution for retrieving data from a processing script into a Request page using Ajax and PHP. The issue I am facing is shown in the error message below: SyntaxError: JSON.parse: unexpected character at line 1 column 13 of the J ...

javascriptphpjqueryjsonajax

Address Book on Rails

Hello, I'm relatively new to this and would be grateful for any assistance. My goal is to utilize the data saved by a user in their address book, and then offer them the option to use that address for delivery. Below is my Address controller: class A ...

javascripthtmlruby-on-railsjsonruby

The error message "Unable to iterate over undefined property in Node.js using EJS and JavaScript" popped up

I've been struggling with the error "Cannot read property 'forEach of undefined" for two days now and I just can't seem to figure out the problem. Any help would be greatly appreciated. Here is the code: bruidstaart.js page where I am tryin ...

javascriptnode.jsexpressejs

Alert event in JavaScript navigating between different pages

My website features two dynamic php pages: customer invoices and customer management. One common request from my users is the ability to swiftly add a new customer directly from the customer invoices page. Instead of cluttering the customer invoices page ...

javascriptjquery

Why does my express POST request result in an empty req.body in Node.js?

After confirming that my data is being passed correctly and the db connection is successful, I am facing an issue with my ajax request. Even though the success callback returns the id, my data seems to not be passing through properly. When attempting to a ...

javascriptnode.jsajaxexpresspost

Utilize Foundation Framework to format JSON output with custom styles for rows, columns, and

Brand new to this, so please bear with me! I've managed to get my json file and output working, but now I need assistance styling it the way I want using the Foundation Framework. For example, let's say my json file looks something like this: ...

jqueryjsonzurb-foundationgetjson

How to make a RESTful webservice call with jQuery's AJAX function?

I've tried following several tutorials on calling a REST web service using jQuery's AJAX function, but I am not receiving any response. Interestingly, when I directly enter the URL in my browser, I get the response. However, when trying to fetch ...

javajqueryajaxweb-servicesrest

Retrieving the current day integer from a fullcalendar rendering in JavaScript and utilizing it as an array key

I am currently working on rendering a full calendar and I would like each cell to be displayed in a different color based on an array that contains color values for each day of the month. The array is retrieved in JSON format. Here is an example JSON arra ...

javascriptphparraysjsonfullcalendar

Is there a way to change the fill color of an SVG circle using Thymeleaf?

I am struggling to change the background color of a circle in an SVG image on my HTML page using Thymeleaf. I attempted to use inline style tags, but it resulted in the circle's background color turning black. <svg id="svg" height="50" width=" ...

htmlcsssvgthymeleaf

Insert a 5-second delay in the JavaScript code before triggering the click event on the next button

Currently, I have a JavaScript code in place that is fairly straightforward. The webpage contains about 100 buttons with the class button, and I am successfully simulating clicking each one of them systematically. However, I would like to introduce a dela ...

javascriptdomclick

angularjs and cakephp working together to handle a request

I've implemented a method in the UsersController to add new users to the database. In the cakephp ctp views, everything seems fine as the request isn't being black-holed and I'm using 'post' for this purpose. However, when I transi ...

javascriptphpangularjscakephp-2.x

Capturing and setting form element values within a Javascript Module Pattern

I'm looking to streamline my form element access using the Module pattern. The goal is to eliminate redundancy by organizing everything under a single module. How can I achieve this without having to directly call the Anonymous function within the mo ...

javascript

The SourceMap in DevTools encountered a parsing error with the message: "chrome-extension

It's been about a week since I first noticed warning messages appearing in my Google Chrome console. https://i.sstatic.net/Aurgz.png Clearing the cache hasn't made a difference; the messages only vanish when in incognito mode. Any suggestio ...

javascriptangulargoogle-chrome

Update the value of a td element when a select option is changed in another td element within the same table row

I have a table set up as follows: Header1 | Header2 | Header3 | Header 4 | Header 5 Row 1 |<span>Some Text</span> | <select></select> Row 2 Row 3 . . . . Rows generated dynamically. My objecti ...

javascriptjquery

Issue with spacing in Internet Explorer 8

I am encountering an issue with a button style in IE8 that is adding extra space. I suspect it may be related to the min-height property, but I have tried using overflow hidden and min-height hacks without any success. Here is the link to the code on JSFi ...

cssinternet-explorer-8spacing

Changing a button to text with PHP upon clicking

I am looking to create a button that, upon being clicked, will show a simple "X" on the website in the same location as the button itself. Essentially, the button will vanish and be replaced by an "X". The current code for my button is straightforward: &l ...

phphtmlbuttononclick