Applying a border using CSS based on a condition, and removing it upon clicking

I have a requirement where I need to add a border around objects when clicked, and remove the border when clicked again. Despite using an if condition with .css, I couldn't make it work as expected. When I tried to print the border width using alert function, it always returns empty. What could be causing this issue? Everything else seems to be functioning correctly.

$('a[id*="grd_WallPosts_lbtn_LikeDislike_Like"]').click(function () {

            if ($(this).children('#imgLikeDislike_Like').css("border-width") == "1px") {

                $(this).children('#imgLikeDislike_Like').css("border-width", "0px");

            } else {                    

                $(this).children('#imgLikeDislike_Like').css("border-width", "1px");
                $(this).children('#imgLikeDislike_Like').css("border-style", "solid");
                $(this).children('#imgLikeDislike_Like').css("border-color", "#b9b9b9");

                var a = $(this).attr("id");
                a = a.replace("grd_WallPosts_lbtn_LikeDislike_Like_", "");
                $('#grd_WallPosts_lbtn_LikeDislike_Dislike_' + a).children('#imgLikeDislike_Dislike').css("border-width", "0px");
            }
        });
jquerycssif-statement

Answer №1

I could implement a CSS class to indicate the clicked state as shown below:

<a class="grd_WallPosts_lbtn_LikeDislike_Like">
    <span class="imgLikeDislike_Like">Like</span>
</a>
<a class="grd_WallPosts_lbtn_LikeDislike_Dislike">
    <span class="imgLikeDislike_Dislike">Dislike</span>
</a>

then

.clicked {
    border: 1px solid #b9b9b9;
}

and

$('.grd_WallPosts_lbtn_LikeDislike_Like').click(function () {
    $(this).children('.imgLikeDislike_Like').toggleClass('clicked');
    $(this).next().children('.imgLikeDislike_Dislike').removeClass('clicked');
});
$('.grd_WallPosts_lbtn_LikeDislike_Dislike').click(function () {
    $(this).children('.imgLikeDislike_Dislike').toggleClass('clicked');
    $(this).prev().children('.imgLikeDislike_Like').removeClass('clicked');
});

Check out the demo.

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

How to leverage onpopstate in Vuejs without relying on vue-router

I am currently utilizing vue.js in conjunction with laravel, specifically incorporating a vue component within a laravel blade file. My aim is to trigger a page reload upon pressing the back navigation button to return to the previous page. The code I have ...

javascriptjquerylaravelvue.js

"Fixing issue with Checkbox not getting checked using a combination of jQuery and

My array called `totalCheckBoxArray` contains the values [1, 2, 3]. I also have checkboxes with values 1, 2, and 3: <div class="card-body"> <h5>Document List</h5> <div class="form-check"> ...

javascriptjqueryhtml

How can I adjust the animation speed for ChartJS graphics?

Trying to adjust the animation speed of a pie chart in chartJS. Various methods have been attempted: numSteps: Number animationSteps: Number Chart.defaults.global.animationSteps = Number However, none of these approaches have successfully altere ...

javascriptjqueryanimationchart.js

When making an AJAX POST request, a Javascript associative array may unexpectedly become empty

I've encountered a problem. There's a page with multiple text fields that have the same class name but different attribute values. I need to create an array that has unique keys which combine the attribute values of the text fields, and then pass ...

jqueryarraysajaxpost

What could be causing the issue of not being able to access an element visible in AngularJS Videogular?

I am currently working on integrating the videogular-subtitle-plugin with the most recent version of Videogular/AngularJS. As a newcomer to AngularJS, I believe there must be a simple solution that I am overlooking. My main challenge lies within a directi ...

javascriptjqueryangularjsdomvideogular

Using CSS to create sleek all-black Flaticons

After trying various solutions, I am still unable to fix this issue. I downloaded some icons and in the demo, they all appear as they should, with a more colorful aesthetic. Here is what the icons should look like: However, this is how the icons actually ...

htmlcssfontsicons

Finding out the specific row that was clicked in a Jquery Mobile listview

I've searched everywhere and can't find a solution. How can I retrieve the value of a row tapped in a listview? This could be anything from the name to the index within the object. Currently, I have a function handling the tap event. I need to pa ...

javascriptjqueryhtmlmobilejquery-mobile

Tips for filling data tables with a JSON string

When I use sAjaxSource = "filepath/file", the data table populates successfully. However, when I try to pass PHP json data and collect it, the datatable does not populate the data. Is there a way for me to directly utilize the JSON data without fetching ...

phpjqueryajaxjsondatatable

Navigating through a website that loads content dynamically with AJAX can be easily done by

Having an issue with scraping data from a website using jQuery AJAX. There are 300 links to scrape, but the site only shows 50 at a time, requiring scrolling to load more. Can someone assist me with this? var baseURL = "https://hr.myu.umn.edu/psc/hrp ...

javascriptjqueryajaxweb-scrapingonepage-scroll

Creating a custom styled Drawer with flexbox styling using ReactJS, MUIv5, and the styled-engine-sc library

Hello community, I am currently working on implementing a custom styled drawer within a flexbox container using the styled-engine-sc. I started with a template and tried to convert it into styled-components. Here is the source: https://codesandbox.io/s/vm ...

cssreactjsmaterial-uistyled-components

What is the best way to utilize a basic jQuery hide/show function to display everything before hiding it?

I have a dropdown menu where selecting an option will display a specific section based on the matching value and class, while hiding all other sections. How can I set it up so that before any selection is made, all sections are displayed and only hide afte ...

javascriptjquerydrop-down-menu

Retrieve data from a form on the server side using an Ajax request

I am currently working on submitting form data through an Ajax call. Here is the relevant form code: <form target="_blank" id="addCaseForm" class="form-horizontal col-md-12" action="" method="POST> <div class="form-group"> <labe ...

javascriptjqueryajaxnode.js

HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...

htmlcsstreeview

Troubleshooting jQuery.ajax - Why won't it function properly?

I've been struggling to get the ajax service functioning properly. I tried a simple $.get("http://google.com"), but it didn't work. Additionally, this code snippet failed as well: <html> <head> <script src="https://aja ...

javascriptjqueryajaxcross-browser

Issue with undefined bindingContext.$data in IE9 on knockout binding handler

I'm attempting to create a unique binding handler that applies role-based access to fields on a page. This custom handler uses the values of other observables from the viewModel to enable or disable input controls based on certain conditions. However ...

javascriptjqueryknockout.jsknockout-3.0

Scaling CSS images to fit within a specific area without distorting them

Is there a way to ensure that an image fits within a specified area using CSS or other methods? For example, if I have images of various sizes and want them all to fit into a div of 150px by 100px without stretching or distorting them. I just want the imag ...

cssoverflowscaledistortion

Can you tell me the CSS equivalent of the SASS/SCSS expression "&$"?

Hey there! I've been diving into the world of Material-UI components and stumbled upon this interesting styling snippet: root: (0, _extends3.default)({}, theme.typography.subheading, { height: theme.spacing.unit * 3, boxSizing: 'content- ...

cssreactjssassmaterial-ui

Having trouble with links, imported templates, and selections not functioning properly post file reorganization?

After setting up my jQuery to import universal template files into various parts of my website, everything was running smoothly. However, once I restructured my filing system, things took a turn for the worse. Now, not only is my SELECT dropdown malfunctio ...

htmljquerydrop-down-menupathhyperlink

ReactStrap: If the dropdown list is too long, users may have trouble viewing the final values

Currently, I'm facing an issue with a dropdown list that is taking up the entire screen and hiding some items. Here's the code snippet for reference: const statusSearchDropDownValues = ( <Row className="align-items-center"> <Col c ...

cssreactjstwitter-bootstrapbootstrap-4reactstrap

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...

javascriptjqueryhtmlbootstrap-4