Question

我li.box，li.car位于$(this)内，其中包含修改后的值，然后我box_orig，car_orig包含原始列表。。

如何将$(this)的数据（html数据，li的内容）替换为原始列表，因此如果$(this)包含li.box，那么我需要将其替换为{{ 1}}的数据

编辑：

box_orig

var list = $("ul#list"); var box_orig = list.children('.box'); var car_orig = list.children('.car');

$(this)

重新编辑：的 重新重新编辑：

我意识到更换数据会破坏任何东西，所以更换不可能，只需显示car / box_orig而不是li.car/box

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

HTML：

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

并且每个li.car包含数据（img和文本）

Answer 1

不完全确定你在问什么。是否要在每个列表项中替换此类中的整个对象？或者仅仅是它的html内容？

如果您只是想替换它的内容，您可以这样做：

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

此示例只是向列表项添加一个ID，并将每个列表项中的类，原始html放入数组“list_orig”。

要访问数据并将示例list1项恢复为原始内容，您可以执行以下操作：

// 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]);
        }
    }
});

编辑：好的，所以您想要用原始列表数据替换数据。以下是使用编辑中新代码的示例：

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

我所能做的就是没有看到更多你的HTML。

进一步编辑：实际上你可以使用一个函数而不需要额外的if语句来检查类。在这里，我们隐藏当前列表，获取它的类并构造原始列表的类或id并显示原始列表。

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

Answer 2

我不确定你到底是做什么，但让我试试:)我制作了两个名单，原始名单和带有“修改”信息的名单：

<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>

并应用以下代码：

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')]++;
     }
 });

<强>更新如果您只是想在列表中恢复li的原始值，那么此代码可能更容易和简单

// 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'));
})

Answer 3

解决方案：

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

Answer 4

这似乎倒退了;我不知道为什么你想创建一些能够修改的东西，然后在一个事件中，用原始信息替换那个修改。无论如何，这里有一些问题可以为那些试图给你满意答案的人提供有用的信息：

1）“原始名单”来自哪里？是停滞的HTML，它是从数据库中抓取的对象还是数组？

2）如果有，您使用的服务器架构（例如PHP / MySQL）？

3）你有我们能看到的任何HTML吗？

我想你可能想做类似的事情：

1）使用MySQL数据库的结果填充初始列表。 2）具有Car的文本输入字段和Box的文本输入字段。 3）让用户在这些输入中放置文本，然后单击某些内容，如按钮或表单提交。 4）用输入中的信息替换初始列表中的特定项目。

如果你回答上面列出的问题，并提供一个更清晰的图片，说明你想要完成什么，我相信你会得到很多好的，有效的答案。

jQuery show car_orig if $（this）.attr（.class）==“car”

4 个答案: