The find function within $(this) is malfunctioning

I'm having issues with displaying/hiding content when clicking on a table row. Here is the simplified code snippet:

HTML:

<table>
    <tr onclick="showDetails()">
        <td>Some text
            <br> <span class="hiddenContent">Some hidden content</span>

        </td>
        <td>Some More Text
            <br> <span class="hiddenContent">Some hidden content</span>

        </td>
    </tr>
    <tr onclick="showDetails()">
        <td>Some text
            <br> <span class="hiddenContent">Some hidden content</span>

        </td>
        <td>Some More Text
            <br> <span class="hiddenContent">Some hidden content</span>

        </td>
    </tr>
</table>

JavaScript:

function showDetails() {
    $(".hiddenContent").hide();

    $(this).find(".hiddenContent").show();
}
javascriptjqueryhtmlcss

Answer №1

One reason for this behavior is that when this is used, it actually refers to the window object.

If you want to bind this to the element that was clicked, you can achieve this by calling the function using the .call() method and passing this.

View an Example Here

<tr onclick="showDetails.call(this)"></tr>

Alternatively, you can simply pass a reference to this as a parameter:

View an Example Here

<tr onclick="showDetails(this)"></tr>

function showDetails(el) {
    $(".hiddenContent").hide();

    $(el).find(".hiddenContent").show();
}

A more recommended approach would be to utilize unobtrusive JavaScript and attach an event listener to the tr elements instead:

View an Example Here

$('tr').on('click', function () {
    $(".hiddenContent").hide();
    $(this).find(".hiddenContent").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

What is the best way to eliminate the ' from every element in an array in this situation?

My form has hidden fields with values enclosed in single quotes like 'enable'. Using jQuery, I extract these values and push them into an array. This array is then sent to a PHP file using JavaScript through the url attribute of the jQuery AJAX m ...

javascriptphpjqueryajaxarrays

Table of Wordpress posts

There has been a question on how to easily add tables to blog posts without having to use HTML. While some are comfortable inserting the code directly into the blog, others like my friend prefer alternatives that don't involve coding. Is there a simpl ...

htmlcsswordpresscontent-management-system

What is the reason behind the inability to overflow the Safari viewport?

My website, , has a footer that is clickable in Chrome but not in Safari. When users scroll to the footer in Safari, the screen jumps back to the top, making it inaccessible. Can anyone help me identify the issue? Below is the CSS code for my React projec ...

cssreactjssafari

Trouble with JavaScript preventing the opening of a new webpage

I need help with a JavaScript function to navigate to a different page once the submit button is clicked. I have tried using the location.href method in my code, but it's not working as expected. Even though I am getting the alert messages, the page i ...

javascripthtml

How to rotate text direction using JavaScript and CSS

Despite my extensive efforts, I have been unable to find a solution to a seemingly simple problem. In JavaScript, I have generated dynamic text using the following code: context.fillText('name', 10, 10, 20); Now, I need this text to be ori ...

javascriptcss

Tips on stopping Bootstrap Modal from opening when element within trigger is clicked?

I've configured my table rows to trigger a bootstrap modal upon click. However, I have an issue with the select box in each row allowing user selection of status options. Is there a way to prevent the modal from opening when the select box is clic ...

javascriptjqueryhtmlcsstwitter-bootstrap

Module for React Native that enables users to select and copy text within a specified view

Is there a feature that enables users to highlight and copy text from within a view? If not, is there a method to identify all "Text" type elements and extract the text they contain? <View> <Text>Text1</Text> <Text>Text2</Text& ...

javascriptandroidreact-nativenpmmodule

HTML form not compatible with POST method in MVC

Why doesn't the $.post() method work in this case? I have tried pressing the button but it doesn't seem to post to EditClassLessonHour. This is the corresponding View Code: <div class="jumbotron"> <form id="editClassLessonHour"> ...

htmlasp.net-mvcpost

What is the process for sending an HTTP post request with a React/Typescript frontend and a C#/.Net backend?

In the frontend code, there is a user login form that accepts the strings email and password. Using MobX State Management in the userstore, there is an action triggered when the user clicks the login button to submit the strings via HTTP post. @action logi ...

javascriptc#.netreactjstypescript

Jade fails to show image in route with parameter

Currently, I am utilizing express 4 and have images saved in the uploads directory. This is a snippet of my code: app.use(express.static(__dirname + '/uploads')); //This part works app.route('/') .get(function (req, res) { ...

javascriptnode.jsexpresspug

Having issues with jQuery's .text() method not functioning as expected on XML elements

Looking at the javascript code below: function getAdminMessageFromXML(xml) { alert('xml: ' + xml); alert("Text of admin message: " + $(xml).find('dataModelResponse').find('adminMessage').text()); return $(xml).fin ...

javascriptjqueryxml

Utilize $.Ajax() to send JSON data using a POST request

I am experiencing an issue while trying to send a JSON object using $.ajax() in jQuery with a POST method from my pure HTML page to a datapower endpoint. The response header in Firebug displays "internal server error." Can anyone help me identify the mis ...

ajaxjquery

The quirks of using jQuery class selectors

I'm currently utilizing jQuery to dynamically change the background image of a button based on the associated class when hovered over. Strangely enough, it only functions correctly when I separate the hover statements into distinct functions. What cou ...

jqueryajax

Tips on resolving the issue of "undefined in VueJS"

I have just developed a new component in VueJS and defined two methods. One method is an action (vuex) and the other one is a regular method. actionTypes.js const TOGGLE_PREVIEW = 'togglePreview'; component method: { ...mapActions([actionTy ...

javascriptvue.jsmethods

Unable to submit form at the moment

I am currently exploring PHP/POST methods to assist me in my day-to-day job as a Web Developer. Despite following online tutorials, when I attempt to submit the form, the page redirects to bagelBack.php, but displays a blank page and does not submit the tw ...

phphtmlposttwittertwitter-oauth

Tips for creating a dynamic sidebar animation

I have recently delved into the world of web design and am eager to incorporate a sidebar into my project. While browsing through w3school, I came across a design that caught my eye, but I found myself struggling to grasp certain concepts like the 'a& ...

javascripthtmljquerycsssidebar

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

#1 Even if chosen, cannot search by id. The 'name' condition in the loop works well but I am unable to correctly search by id (returns nothing). #2 When selecting an option from the dropdown menu, it only displays until I start typing. I would l ...

javascripttypescriptvue.js

Steps to have the initial link redirect to a designated webpage

I am working with tables that have links defined in the HTML. I want to modify the behavior so that the first link opens a different URL, for example: john.com. Is it possible to achieve this? Specifically, I want the link associated with the first name ( ...

javascriptjqueryangularjs

Sorting alphabetically, either by JAVA, JavaScript, or Idoc script

Currently, I have a task at hand that requires sorting items within categories alphabetically, with the exception of Examples. Special characters and numbers should be prioritized over letters in the sorting order. I've encountered an issue where mos ...

javajavascriptsortingalphabeticalidoc

Encountering an error during the installation of node js when attempting to run npm install

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e687b7f7d6a327f6b6a717d717e737f76776c796937252327">[email protected]</a&g ...

javascriptreactjs