The find function within $(this) is malfunctioning

Question

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();
}

javascript jquery html css

Answer 1

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();
});

Answer 2

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();
});

The find function within $(this) is malfunctioning

Answer №1

Similar questions

Unable to access the 'fn' property of undefined in Handlebars causing a TypeError

Combine both typescript and javascript files within a single Angular project

modify the color of a box within a grid upon clicking it

Is there a way to export all images that have been imported into a React JS file with just one export command?

What is the proper way to implement parameters and dependency injection within a service?

Tips for customizing the appearance of the react-stripe-checkout form

CSS: The button text appears to be aligned to the bottom of a line height that is seemingly larger than

Jquery Timer that can be toggled on and off with a single button

Creating dynamic HTML tables within Highcharts

toggle visibility of <li> elements using ng-repeat and conditional rendering

Tips for resolving jQuery modal window issues

Tips on adding background images to your chart's background

Utilize JSON to populate Highcharts with data from a database in an MVC PHP framework

Running two servers at the same time using nodemon might seem complex, but it

Creating custom markers with an API in Vue-2-Leaflet

Tips for resolving the issue of "Unable to assign property '_DT_CellIndex' to undefined in Jquery Datatable"

Experiencing a problem with Datatables where all columns are being grouped together in a single row

Image Placement Based on Coordinates in a Graphic Display

What's the process for setting a value in selectize.js using Angular programmatically?

Positioning and resizing elements based on varying screen sizes and levels of zoom