0

我正在为一个客户端开发一个简单的 jQuery 解决方案，该解决方案将把信息从这个页面上的一个表中传递出来：http: //yft.ac/upcoming-workshops/，到这个页面上的“感兴趣的研讨会”字段：http:// yft.ac/contact-us/。我正在使用本地存储 API 执行此操作，但遇到了问题。

您会注意到，如果您单击“YFT Admissions Insights”标题下的三个按钮中的任何一个，所有信息都将转移到所需的输入中。但是，每当您单击“YFT 密集应用研讨会”下方的按钮时，只会结转部分信息，而无论何时单击“YFT Head Start”下方的按钮，都不会结转任何信息。

这是我正在使用的代码：

即将到来的研讨会页面：

jQuery(function ($) { 
    $('body').on('click', 'a.button', function () { 
        // Variables
        var index = $(this).parents('table').index('table'); 
        var buttonIndex = $("a.button").index(this);
        buttonIndex+=1; //Add one to our index so we ignore the <tr> values in the <thead>

        var cur_workshop_name = $(this).parents('.innercontent').find('h3').eq(index).text(); 
        var cur_workshop_date = $(this).parents('.innercontent').find('tr:nth-of-type(' + buttonIndex + ') td:first-child').eq(index).text(); 
        var cur_workshop_location = $(this).parents('.innercontent').find('tr:nth-of-type(' + buttonIndex + ') td:nth-of-type(3)').eq(index).text(); 

        //Set Item in Local Storage
        localStorage.setItem('workshop', cur_workshop_name + ' | ' + cur_workshop_location + ' | ' + cur_workshop_date); 
    }); 
});

联系我们页面：

jQuery(function ($) { 
    //Output value in respective field
    $('#workshop').val( localStorage.getItem('workshop') );
});

我真的使用我在 jQuery 中的中级技能将这些拼凑在一起，但我认为问题的发生是因为页面上的多个表（有三个）或innercontent类的多个实例（有三个）。

在解决这个小问题时，我将不胜感激，在此先感谢！

4

1 回答 1

1

您可以通过稍微不同地导航 DOM 树来简化很多。

jQuery(function ($) { 
    $('body').on('click', 'a.button', function (event) { 
        var btn   = $(this);
        // get the closest table (unlike parents() this will go up the tree until it finds the first matched element and returns just that)
        var table = btn.closest('table');
        // get the closest row to the button (same as for the table)
        var row   = btn.closest('tr');

        // the find the h3 by searching the previous siblings and stopping at the closest (using :first)
        var cur_workshop_name     = table.prevAll('h3:first').text(); 
        // using the parent row search the child td elements for the required data
        var cur_workshop_date     = row.children('td:first-child').text(); 
        var cur_workshop_location = row.children('td:nth-child(3)').text(); 

        //Set Item in Local Storage
        localStorage.setItem('workshop', cur_workshop_name + ' | ' + cur_workshop_location + ' | ' + cur_workshop_date); 
    }); 
});

这是一个显示每个单击的按钮的检索值的示例：http: //jsfiddle.net/jVJjZ/embedded/result/

于 2013-09-09T22:26:55.387 回答