Exchanging text between varying divs and classes

On my webpage, I have multiple boxes of cards where content can dynamically populate. Each box contains a click-to-open accordion feature in the upper right corner. I am struggling to figure out how to change the text of only the clicked box without affecting the text in all the other boxes.

*new

In an attempt to summarize, I want to be able to change the text within a specific div when it is clicked, without it affecting the text in any of the other divs.

$('.change-1').click(function () {
    var $mudartxt = $('.mudartexto');
    if ($mudartxt.text() == 'expandir')
        $mudartxt.text('ocultar');
    else {
        $mudartxt.text('expandir');
    }
});

Answer №1

To locate the currently clicked item, you can utilize the event object.

$('.change-1').click(function (e) {
    // Grab the current target as a jQuery object
    var $target = $(e.currentTarget);
    // Locate mudartexto in the current target.
    var $mudartxt = $target.find('.mudartexto');
    if ($mudartxt.text() == 'expandir')
        $mudartxt.text('ocultar');
    else {
        $mudartxt.text('expandir');
    }
});
.change-1 {
display:inline-block;
width:200px;
height:50px;
text-align: center;
background-color:#dfdfdf;
clear: both;
float: left;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="change-1">
  <div class="mudartexto">expandir</div>
</div>
<div class="change-1">
  <div class="mudartexto">expandir</div>
</div>
<div class="change-1">
  <div class="mudartexto">expandir</div>
</div>
<div class="change-1">
  <div class="mudartexto">expandir</div>
</div>

Answer №2

If you want to know how to update the text within a clicked box element, you can achieve it with the following code:

$('.change-1').click(function () {
    var $mudartxt = $(this).find('.mudartexto');
    if ($mudartxt.text() == 'expandir')
        $mudartxt.text('ocultar');
    else {
        $mudartxt.text('expandir');
    }
});

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

Exploring the location where an XMLHttpRequest/Ajax link is executed

I am relatively new to the world of Ajax/XMLHttpRequest and I am currently trying to wrap my head around its functionality. My current project involves developing an inventory program that essentially allows users to add tools to a digital box. On the mai ...

Avoid activating ng-blur when ng-keydown is triggered in AngularJS

Currently, I am working on a project involving angularJS and I am facing an issue with the execution of ng-blur conflicting with ng-keydown. The problem arises because ng-keydown causes the element to lose focus at a certain point. The HTML code in questi ...

componentWillReceiveProps with excessive conditional statements

Having recently ventured into React development, I've already worked on 3 major projects utilizing React+Redux. However, I've noticed a recurring pattern that I find quite displeasing: componentWillReceiveProps(nextProps) { if (nextProps.par ...

What is the best way to design a shape (a quadrilateral with rounded edges) using CSS?

Struggling with creating a widget in React Js that has an image as the background? The image is designed to be dynamic, changing color and size based on the device. I've attempted using inline SVG and SVG within an img tag but can't seem to contr ...

Setting up Babel to effectively function across multiple directories

I've been utilizing Babel for some time now and it effectively transforms my ES Next code to the dist directory using this command: babel src --out-dir dist --source-maps --copy-files Up until now, all my JavaScript code has been stored in the src fo ...

What steps should I take to establish an efficient folder organization system for a website utilizing HTML, CSS, and Javascript with Twitter Bootstrap?

After cloning the latest release of Twitter Bootstrap using Git with the command 'git clone git://github.com/twbs/bootstrap.git', I am in the process of creating an HTML/CSS site utilizing Bootstrap. Upon reviewing this answer on Stack Overflow ( ...

Are Opera and IE9 blocking cross-origin Ajax requests?

I have been utilizing the following page - - to initiate a cross-origin Ajax request towards this specific resource: The functionality appears to be functioning as expected in Chrome, Safari, and Firefox, but encounters an issue in IE9 and Opera. Below ...

What sets apart .js and .ts files in the development of a Selenium Protractor framework?

As a newcomer to Selenium Protractor, I noticed that many tutorial videos on YouTube utilize .js files for test scripts. However, the framework in my current project utilizes .ts files instead. I am seeking assistance in comprehending the variances betwe ...

Validation of HTML5 forms for AJAX button submission

I am working with a form that utilizes the new HTML5 form validation feature, which I find to be beneficial. However, I do not like how pressing the button causes the page to refresh (form submit). Instead, I would like to use AJAX to update specific page ...

Retrieve JSON data and initialize the DOM using jQuery Mobile

My application is using jQuery Mobile, with the built-in ajax anchor page transition feature. Here's an example: <a href="cards.html">Go</a> Both of the html files have the same structure: <html>...<body><div data-role="p ...

The use of DataTypes.DECIMAL in Sequelize auto-migration command might be resulting in an error stating 'Unknown column'

I am currently working with Sequelize, an ORM for Node.js, and I am facing an issue when trying to add a column to a table with a data type of 'DECIMAL'. Despite successfully adding columns with other data types like DATE and STRING to similar ta ...

Learn the process of updating a button attribute using a database value through AJAX

My goal was to dynamically change the status of a button from enabled to disabled depending on the data retrieved from a table in the database. Below you will find the code snippets for the ajax request, the controller function, and the database table sch ...

Troubleshooting issues with ASP.NET bundling and minification when using Angular.js

After reviewing many questions on the same topic, none of them were able to solve my specific case. Our current challenge involves bundling and minifying AngularJs files within .Net code. The following code snippet shows how we are bundling our files insi ...

Exploring BreakPoints using gridlisttiles

Can Grid List Tile components be configured to occupy the entire screen on small devices using sm={12} lg={6}, but only half of the screen on larger devices? If not, is there a way to adjust the grid list layout to display fewer tiles per row on smaller ...

What are the best techniques for using jQuery to manipulate an HTML form that contains nested elements?

I have a scenario where I need to dynamically generate mini-forms within an empty form based on certain conditions. For instance, imagine a form that gathers information about restaurants such as their names and locations. Depending on the number of restau ...

Can you please tell me the CSS pseudo element that corresponds to the AM/PM field in an <input type="time">

The issue with the am/pm display is dependent on the browser that the app is opened in. I am looking for a universal solution to ensure it does not appear in any popular browsers. Below is the HTML code for my input time field: <input type="time" for ...

Creating dynamic radio buttons in AngularJS

How can I create dynamic radio buttons in angularjs, using mobile numbers from this json array? challengeSelectInfo: [ {"mob_0" : "xxxxx1211"}, {"mob_1" : "xxxxx1211"}, {"mob_2" : "xxxxx1211"} ] I attempted to use ng-repeat and loop through c ...

The process of uploading a React App to Heroku resulted in a critical error: "FATAL ERROR: Heap limit reached, Allocation failed - JavaScript heap out of memory."

There's a puzzling issue that I believe I have the solution to (paying for more bandwidth on Heroku), but the root of the problem eludes me and it's truly frustrating. Any assistance in pinpointing the cause would be greatly appreciated! Hopefull ...

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

When an input is disabled in "react-hook-form", it may return undefined

Within my React application, there exists a form containing various input fields. I have enclosed these fields using FormProvider imported from react-hook-form and utilized register within each field. import { useForm, FormProvider, useFormContext } from & ...