jQuery show car_orig if $(this).attr(.class)==“car

问题:

I have li.box, li.car which are inside a $(this) which contain modified values and then I have box_orig, car_orig containing the original lists...

how can I replace $(this)'s data (html data, the li's content) with the original list, so if $(this) contains li.box then I need to replace it with box_orig's data

Edit:

var list              =   $("ul#list");

var box_orig    = list.children('.box');
var car_orig    = list.children('.car');

And $(this)

 $('#list li').each(function () {
     if ($.inArray($(this).attr('class'), show) == 0) {
         console.log($(this)); //-> Returns li.box / car or whatever list was selected
     }
 });

Re-edit: Re-Re-edit:

I realized that replacing the data breaks anything, so replacing goes out of the question, just show car/box_orig instead li.car/box

                $('#list li').each(
                function(){
                    //alert($.inArray($(this).attr('class'),show) );
                    if ($.inArray($(this).attr('class'),show) == 0)
                    {
                        if($(this).attr('class') == 'box')
                        {
                             --> show box_orig, which contains lis with info BUT DO NOT REPLACE THE DATA, just show the box_orig instead of $(this) = li.box
                        }
                        if($(this).attr('class') == 'car')
                        {
                             --> show car_orig, which contains lis with info BUT DO NOT REPLACE THE DATA, just show the box_orig instead of $(this) = li.car
                        }
                        console.log($(this));
                    }

html:

jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)
jQuery(li.car)  result...rifting (line 703)

and each li.car contains data (img and text)

回答1:

I'm not really sure what exactly do you, but let me try :) I made two lists, original and the one with 'modified' information:

<ul id='list'>
    <li class='box'>orig box1</li>
    <li class='box2'>fake box1</li>
    <li class='box'>orig box2</li>
    <li class='car'>orig car1</li>
</ul>
<hr>
<ul id='list2'>
    <li class='box'>mod box1</li>
    <li class='box2'>mod_fake box1</li>
    <li class='box'>mod box2</li>
    <li class='car'>mod car1</li>
</ul>

And applied the following code:

var list              =   $("ul#list");
var box_orig  = list.children('.box');
var car_orig  = list.children('.car');
var counts = {'box':0, 'car':0};

$('#list2 li').each(function() {
     var el = $(this).attr('class')+'_orig';
     if (typeof (window[el]) !== 'undefined') 
     { 
       $(this).html($(window[el][counts[$(this).attr('class')]]).html());    
       counts[$(this).attr('class')]++;
     }
 }); 

Updated: If you are just trying to restore the original values of li in the list then this code might be much easier and simple

// save data after page load
$('#list li').each(function(){  
    if ($(this).hasClass('box') || $(this).hasClass('car')) $(this).data('original', $(this).html());
})

// when data was updated use this code
$('#list li').each(function(){  /
    if ($(this).hasClass('box') || $(this).hasClass('car')) $(this).html($(this).data('original'));
})

回答2:

Not exactly sure what you're asking. Do you want to replace the entire object in this class each list item? Or just simply its html content?

If you just want to replace it's content you could do something like this:

// Create the list item array + count vars
var list_orig = [];
var list1_count, list2_count = 0;

// Loop through the list items and sort html into the right arrays
// eg. list_orig[0] = [listItem class, listItem id, listItem html content];
$('#list li').each(function(index){

    if($(this).hasClass("list1")){
        list1_count++;
        var id = "list1_" + list1_count;
        $(this).attr("id", id);
        list_orig.push(["list1", id, $(this).html()]);
    }else if($(this).hasClass("list2")){
        list2_count++;
        var id = "list2_" + list2_count;
        $(this).attr("id", id);
        list_orig.push(["list2", id, $(this).html()]);
    }
});

This example simply adds an ID to the list item and places this, the class and the original html from each list item into an array "list_orig".

To access the data and revert for example list1 items back to their original content you could do something like this:

// Example click function to revert list1 back to it's original html
$("body").click(function(){
    for(var i in list_orig){
        alert(list_orig[i][2]);
        if(list_orig[i][0] == "list1"){
            var id = "#" + list_orig[i][1];
            $(id).html(list_orig[i][2]);
        }
    }
});

EDIT: Ok so you're wanting to replace the data with the original list data. Here's an example using the new code from your edit:

if ($.inArray($(this).attr('class'),show) === 0)
{
   // CREATE A TEMPORARY VAR FOR YOUR MATCHED LIST (eg. li.box)
   var x_orig = $(this).attr('class') + "_orig";
   x_orig = window[x_orig]; //USE THIS TO CONVERT THE STRING TO A VARIABLE NAME

   // CREATE A TEMPORRAY VAR FOR THE NEW CONTENT
   var content = x_orig[0]->innerHtml;

   // REPLACE THE CONTENT
   $(this).html(content);
}

All I can do without seeing more of your html.

FURTHER EDIT: You can actually just use one function without the extra if statements to check for the class. Here we hide the current list, take it's class and construct the class or id of the original list and show that original list.

if ($.inArray($(this).attr('class'),show) == 0)
{
    // FIRST HIDE THE CURRENT LIST
    $(this).hide();

    // THEN CONSTRUCT THE ORIGINAL LIST CLASS or ID
    var x_orig = "." + $(this).attr('class') + "_orig"; // CLASS USING "."
    // var x_orig = "#" + $(this).attr('class') + "_orig"; // or ID USING "#"

    // NOW SHOW ORIGINAL USING x_orig VARIABLE FROM ABOVE
    $(x_orig).show();

    console.log($(this));
}

回答3:

Solution:

var list              =   $("ul#list");

var box_orig    = list.children('.box');
var car_orig    = list.children('.car');

...
$('#list li').each(
    function(){
        //alert($.inArray($(this).attr('class'),show) );
        if ($.inArray($(this).attr('class'),show) == 0)
        {
            if($(this).attr('class') == 'box')
            {
                list.append(box_orig);
            }
            if($(this).attr('class') == 'car')
            {
                list.append(car_orig);
            }
        }
        ...

回答4:

This seems backwards; I don't know why you'd want to create something that enabled modification, then upon an event, replace that modification with original information. At any rate, here a few questions that would provide helpful information to people trying to give you a satisfactory answer:

1) Where is the "original list" coming from? Is it stagnant HTML, is it either an object or an array grabbed from a database?

2) If any, what server architecture are you using (e.g. PHP/MySQL)?

3) Do you have any HTML we can see?

I think you might want to do something like:

1) Have an initial list populated by results from a MySQL database. 2) Have a text input field for a Car and a text input field for a Box. 3) Have a user put text in those inputs, then click something, like a button or a form submit. 4) Replace specific items in the initial list with the information from the inputs.

If you answer the questions listed above and provide a little clearer picture of exactly what you're trying to accomplish, I'm sure you'll get back plenty of good, functioning answers.