Adjust the styling of the anchor tag within the selected div by utilizing jQuery

I am struggling with changing the color of a specific anchor tag when clicked inside a div with class .product_wishlist. Currently, all anchor tags within .pw div are changing colors. Is there a way to apply selected css only to the clicked element? Any help would be greatly appreciated.

$(document).ready(function() {
  $(document).on('click','.pw',function(e){
    $('.pw > a').css('background-color', 'green');
  });
});
.product_wishlist > a {
    background-color: #e91e63;
    height: 30px;
    position: absolute;
    right: -32px;
    text-align: center;
    top: 15px;
    width: 30px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    z-index: 9;
}

.wishlish-selected > a {
    background-color: black;
    height: 30px;
    position: absolute;
    right: -32px;
    text-align: center;
    top: 15px;
    width: 30px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    z-index: 9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="product_wishlist pw">
  <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist</a>
</div>

javascriptjqueryhtmlcss

Answer №1

Utilize this to reference the current element and use .find() to locate the anchor element within it:

Replace

$('.pw > a').css('background-color', 'green');

With

$(this).find('a').css('background-color', 'green');


$(document).ready(function() {
  $(document).on('click','.pw',function(e){
    $(this).find('a').addClass('wishlish-selected')
  });
});
.wishlish-selected{
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="product_wishlist pw">
  <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 1</a>
</div>
<div class="product_wishlist pw">
  <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 2</a>
</div>
<div class="product_wishlist pw">
  <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 3</a>
</div>

Since you are already specifying the anchor element after the class in the CSS selector, there is no need to find the anchor element again in jQuery. Simply add the class to the current element. Also, considering the issue with position: absolute, I have excluded that property for demonstration purposes:

$(document).ready(function() {
  $(document).on('click','.pw',function(e){
    $(this).addClass('wishlish-selected')
  });
});
.product_wishlist > a {
    background-color: #e91e63;
    height: 30px;
    right: -32px;
    text-align: center;
    top: 15px;
    width: 30px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    z-index: 9;
}

.wishlish-selected > a {
    background-color: black;
    height: 30px;
    right: -32px;
    text-align: center;
    top: 15px;
    width: 30px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    z-index: 9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="product_wishlist pw">
  <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 1</a>
</div>
<div class="product_wishlist pw">
  <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 2</a>
</div>
<div class="product_wishlist pw">
  <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 3</a>
</div>

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

"Error: The chai testing method appears to be improperly defined and is not

I am trying to set up a Mocha and Chai test. Here is my class, myClass.js: export default class Myclass { constructor() {} sayhello() { return 'hello'; }; } Along with a test file, test.myclass.js: I am attempting to a ...

javascriptunit-testingmocha.jschai

Is there a way to refresh CSS styles when the window width is adjusted?

Is there a way to refresh CSS styles when the window width changes? I attempted this method, but unfortunately it did not work as expected. A simple refresh (F5) helps to rectify the CSS tags. jQuery(function($){ var windowWidth = $(window).width(); ...

javascriptjquerycssresizereload

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

I need the columns in the grid to have a width of 100%. <kendo-grid-column field="id" title="id" [width]="'100%'"> </kendo-grid-column> However, when I hover over the code, I get this message: The value "100%" cannot be ...

csskendo-uikendo-ui-angular2

Accessing JavaScript cookie within .htaccess file to establish redirection parameters according to cookie content

Is there a way to modify the rules within my .htaccess file so that it can properly read a user-side cookie and redirect based on its content? The scenario is this: I have a cookie called userstate which contains an abbreviation of US states, such as AL ( ...

javascripthtml.htaccess

Serve static files using ExpressJS when a post request is made

My Express server is set up to serve static files for my website and it's working fine: var express = require('express'); var app = express(); var path = require('path'); var p = path.join(__dirname, '../web/public'); app ...

javascriptnode.jsformsexpresspost

Error message: When using the Semantic UI React Modal, the Portal.render() function requires a valid React element to be returned, otherwise

Currently, I am working on integrating the Semantic UI React modal into my dashboard application built using React. To facilitate this integration, I have developed a ModalManager component that will be utilized in conjunction with Redux to handle the stat ...

javascriptreactjsreact-routerreact-reduxsemantic-ui-react

What is the best way to display time instead of angles in highcharts?

Hey there! I'm currently working with highcharts and I have a polar chart where I want to display time on the y-axis instead of angles. Here's what I've tried so far: On the x-axis, I have angles and I've set tickInterval: 45,. How can ...

javascriptangularhighchartsangular8

Create a fresh array by merging two existing arrays while maintaining the order of values

I have a pair of arrays: array one: ( [0] => 2 [1] => 5 ) array two: ( [0] => Sentry [1] => Maxima ) and I'm attempting to create a new array that resembles the following new array: ( ["Sentry"] => 2 ["Maxima ...

phphtml

What could be causing the side margins on my navbar in mobile view in Bootstrap?

After spending some time working on a simple navbar with CSS styling, I encountered an issue when viewing it in mobile mode. The navbar did not expand to 100% of the screen width and had a margin of about 20px on both sides. CSS .navbar .brand { wi ...

htmlcsstwitter-bootstrapmarginnavbar

Warning happens two times upon performing a right-click

I've got some code that checks the mouse's position, and triggers an alert followed by a redirect if a certain condition is met. It functions correctly, however, I noticed that if you right-click in one area and then left-click in another area t ...

javascriptjqueryhttp-redirectalert

increase the width of the side menu bar to accommodate more content on the Bootstrap

At the moment, the line that separates the content from the side menu stops at the side menu's content. However, the content is going to be longer than the side menu, causing the page to look uneven. I attempted to adjust the page-content d-flex but d ...

htmlcssbootstrap-4

What is the best method for identifying the destination of my data submission in an HTML form?

I am currently facing an issue with a website that has an input form. I am struggling to identify where the form posts its data to. There must be some PHP code handling the form, whether it's using JSON or direct post. Is there a way to find this in ...

phpjqueryhtmlajaxforms

Assign a class to the following element using an Angular 2 Directive

I have a dropdown menu and I want to incorporate an Angular2 directive to control the opening and closing of this dropdown. How can I apply the open class to the latest-notification div, knowing that my directive is applied to the button tag? Below is my ...

javascriptangularangularjs-directive

What is the best way to submit a form using PHP to send an email, implement Ajax for seamless transitions, and display a message next to the form without any screen refresh?

Upon clicking the submit button, I am looking to achieve two things: (1) Sending the form data via email using PHP without refreshing the page. (2) Displaying a thank you message next to the form utilizing Ajax. Most of the functionality is in pl ...

javascriptphpajaxforms

Assign an array value to the input based on the selection made in Javascript

After finding a lot of useful information in previous questions, I am struggling to get the last piece that I need. My PHP code helps me loop through form fields and assign unique names to each field using a variable. One of these fields is for "expense ty ...

javascriptphparrays

Problem with selecting items in Kendo UI Menu

Problem: The select event is not triggering when clicking on the image in the kendo menu item. My troubleshooting steps: Review the sample code provided below <!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/ken ...

javascriptjsonasp.net-mvckendo-uikendo-menu

Include HTML tag and class inside a JavaScript code block

A dynamic button is loaded when a certain condition in the JavaScript is met. Upon loading, I want to trigger a function (ClickMe) by clicking the button. However, I'm facing difficulty connecting the function with the button in my code. In my scrip ...

javascriptjqueryhtml

My HTML and CSS design is not displaying correctly on mobile devices

Currently, I am in the process of utilizing a free website template. However, I am facing an issue with adjusting the background image. Is there anyone who can provide some guidance on resolving this particular problem? I would be happy to share the code ...

htmlcssmobile

Arranging Material UI tabs on both sides

I'm currently working with Material UI tabs and I'm trying to achieve a layout where some tabs are positioned to the left and others to the right. For instance, if I have 5 tabs, I want 3 on the left and 2 on the right. I've tried placing th ...

javascriptreactjsmaterial-ui

What causes an :before content element positioned absolutely to exceed the boundaries of its parent when set as an inline element?

Check out this CodePen: https://codepen.io/jossnaz/pen/BMwpjR HTML <br> <div class="" style=" "> <span class="" style=""> Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos h ...

htmlcss