Guide on transferring the data of a jQuery variable to a different variable

Question

Guide on transferring the data of a jQuery variable to a different variable

How can I assign the content of a variable to another variable successfully? Here is what I have tried so far:

var className = $($(this).attr("class"););

$('.content').html(className)

EDIT:

Let's assume that the end value for "var className = $($(this).attr("class"););" is point1

point 1 contains:

EDIT 2: (CONTAINS FULL CODE)

    <div class="content"><h1>testing hello world</h1><div class="position"> <div class="point1"> test<br> awewa<br> TEST <h1> test </h1> </div></div></div>

    <script type="text/javascript">
    var point1 = '<div class="content"><h1>testing hello world</h1><div class="position"> <div class="point1"> test<br> awewa<br> TEST <h1> test </h1> </div></div></div>';
    var className = "Broken";
    $('.content [class] [class]').click(function () {$(this).fadeTo(250, 0.25, function () {
    className = $(this).attr("class");
    $('.content').html(className)

    $(this).fadeTo(250, 1.00);

    });}
    );

    </script> 


var point1 = '<div class="content"><h1>testing hello world</h1><div class="position"> <div class="point1"> test<br> awewa<br> TEST <h1> test </h1> </div></div></div>';

"$('.content').html(className)" needs to contain the string in point1 classname

jquery css

Answer 1

Answer №1

Alright, let me explain it clearly. You have some HTML content stored in variables with the same names as class names of specific elements. When one of those elements is clicked, you want to retrieve the HTML from that variable and set it as the content of another element with the class name .content.

$('.someClass').on('click',function(){
    var className = this.className; // Get the classname which is a variable
   var content = window[className];
   if(content)
    $('.content').html(content); //Assuming the variable is defined in the window Scope. 
});

Breaking it down:-

window[className] <-- to access the variable defined in the window scope.

Update:-

For your updated code, try this approach. Since you are replacing the content and need the click event to work again, consider using a delegated event handler with .on(), or use .live for older versions of jQuery.

   var className = "Broken";
   $(document).on('click', '.content [class] [class]', function () {
       $(this).fadeTo(250, 0.25, function () {
           className = this.className;
           $('.content').html(window[className]);
           $(this).fadeTo(250, 1.00);

       });
   });

Check out the Demo here

Answer 2

Alright, let me explain it clearly. You have some HTML content stored in variables with the same names as class names of specific elements. When one of those elements is clicked, you want to retrieve the HTML from that variable and set it as the content of another element with the class name .content.

$('.someClass').on('click',function(){
    var className = this.className; // Get the classname which is a variable
   var content = window[className];
   if(content)
    $('.content').html(content); //Assuming the variable is defined in the window Scope. 
});

Breaking it down:-

window[className] <-- to access the variable defined in the window scope.

Update:-

For your updated code, try this approach. Since you are replacing the content and need the click event to work again, consider using a delegated event handler with .on(), or use .live for older versions of jQuery.

   var className = "Broken";
   $(document).on('click', '.content [class] [class]', function () {
       $(this).fadeTo(250, 0.25, function () {
           className = this.className;
           $('.content').html(window[className]);
           $(this).fadeTo(250, 1.00);

       });
   });

Check out the Demo here

Answer 3

Answer №2

Suppose 'this' represents an element (such as when you're inside a $.each() callback, then $(this).attr('class') will give you all the CSS classes assigned to that particular element. This doesn't include all the CSS rules affecting it, just what appears in the 'class=""'. The outer $() function here will conceal the return value from the initial assignment in your query. The second line is setting the innerHTML of an element with the class "content" to the value returned by the first line.

Answer 4

Suppose 'this' represents an element (such as when you're inside a $.each() callback, then $(this).attr('class') will give you all the CSS classes assigned to that particular element. This doesn't include all the CSS rules affecting it, just what appears in the 'class=""'. The outer $() function here will conceal the return value from the initial assignment in your query. The second line is setting the innerHTML of an element with the class "content" to the value returned by the first line.

Answer 5

Answer №3

Revision:

Seems like you're aiming to achieve this:

let classSelected = $('.' + $(this).attr("class")).html();
$('.content').html(classSelected);

Answer 6

Revision:

Seems like you're aiming to achieve this:

let classSelected = $('.' + $(this).attr("class")).html();
$('.content').html(classSelected);

Answer 7

Answer №4

There seems to be a minor syntax error in the code, but overall it appears to be correct.

If you intend to display the value of the class property of the current element within the .content element, you can use the following code:

var className = $(this).attr("class");
$('.content').html(className)

Check out the demo: Fiddle

Update:
If className is a property associated with an object x, you can fetch the value using x[className]. If it's a variable in the global context, use window[className] instead.

var point1 = '<div class="content"><h1>testing hello world</h1><div class="position"> <div class="point1"> test<br> awewa<br> TEST <h1> test </h1> </div></div></div>';
jQuery(function($){
    var className = "Broken";
    $('.content').on('click', '[class] [class]', function () {
        $(this).fadeTo(250, 0.25, function () {
            className = $(this).attr("class");
            $('.content').html(window[className])
        });
    });
});

Updated Demo: Fiddle

Answer 8

There seems to be a minor syntax error in the code, but overall it appears to be correct.

If you intend to display the value of the class property of the current element within the .content element, you can use the following code:

var className = $(this).attr("class");
$('.content').html(className)

Check out the demo: Fiddle

Update:
If className is a property associated with an object x, you can fetch the value using x[className]. If it's a variable in the global context, use window[className] instead.

var point1 = '<div class="content"><h1>testing hello world</h1><div class="position"> <div class="point1"> test<br> awewa<br> TEST <h1> test </h1> </div></div></div>';
jQuery(function($){
    var className = "Broken";
    $('.content').on('click', '[class] [class]', function () {
        $(this).fadeTo(250, 0.25, function () {
            className = $(this).attr("class");
            $('.content').html(window[className])
        });
    });
});

Updated Demo: Fiddle

Guide on transferring the data of a jQuery variable to a different variable

Answer №1

Update:-

Check out the Demo here

Answer №2

Answer №3

Answer №4

Similar questions

Display text when hovering over a button

Position the SVG next to the link text in a Bootstrap navbar brand

Add various inputs to a table using JavaScript

Using jquery to create HTML elements but unable to remove them using jquery

Troubleshooting PHP echo response issue with AJAX POST and FormData submission

How to use AngularJS to collapse various panels with unique content

How can I keep the CSS3 animation playing even after the hover state ends?

Troubleshooting CSS compatibility issues in Firefox browser (or HTML rendering as plain text)

What is the best way to showcase a banner on a website to alert the user who is currently logged in about a new message waiting for them?

Error encountered using jQuery $.post: TypeError - e.type is not a valid function

Introducing whitespace nowrap disrupts the CSS grid layout

What is the best way to transition a div from the top to the bottom in mobile view?

Deselect a selected radio button by clicking on it

Adjusting the width of tabs dynamically using jQuery

Adaptive design that uses identical HTML for both desktop and mobile versions

Avoiding repeated execution of event handlers in subviews of Backbone

How can you implement a delete button in jQuery DataTables using an API?

What is the best way to obtain the profile picture of a user on Instagram?

We have encountered an issue with the syntax in the code: ajaxsample/update_agenda. It seems to be an unrecognized expression according to

Executing two AJAX requests simultaneously with Django, AJAX, and jQuery in a single event