JQuery函数具有混合ID

Question

由于$（id + _pan）选择器，以下代码失败。我认为这会起作用，但显然不行。如何做到这一点。

  function panel(id) {
var toggle = id + '_pan';
        if ($(id).html('Learn more »')) {
        $(id).html('Close panel «');
        $(toggle).slideDown('600'); }
        else if ($(id).html('Close panel «')) {
        $(toggle).slideUp('600');
        $(id).html('Learn more »') }
    }

<a id="TABPAN_padi_training" href="#" onclick="panel(this); return false">Learn more &raquo;</a>

有什么想法吗？

非凡

Answer 1

HTML

<a id="TABPAN_padi_training" href="#">Learn more &raquo;</a>

的JavaScript

$(function (){
    function panel() {
        var $elt = this,
            $toggle = $(this.id + '_pan'),
            toggleIsVisible = $toggle.is(':visible'),
            CLOSE_PANEL = 'Close panel «',
            LEARN_MORE = 'Learn more »',
            slideTime = 600;
        if (toggleIsVisible) {
            $elt.html(LEARN_MORE);
            $toggle.slideUp(slideTime);
        }
        else {
            $elt.html(CLOSE_PANEL);
            $toggle.slideDown(slideTime);
        }
        return false;
    }

    $('#TABPAN_padi_training').click(panel);
});

代码清理：

• Cache your jQuery objects
• 编写if语句，以便他们测试正确的东西 - 对HTML的测试是脆弱的，而不是你的意思 ^{_{更不用说你正在测试返回的值通过jQuery setter，而不是getter}}
• 将重复的字符串提取到局部变量中，以减少因拼写错误而导致错误的机会
• 停止使用内联事件处理程序并开始编写unobtrusive JavaScript
• 将数字而不是字符串传递给.slideUp()和.slideDown()，因此参数被解释为毫秒值

Answer 2

您实际上并未在条件语句中进行任何比较。您编写的两个条件都将返回true，因为它们正在设置HTML（当然第二个条件永远不会被命中，因为第一个条件总是返回true）

另外，panel（this）没有传入ID，它传入实际的HTML对象，幸运的是jQuery也会变成jQuery对象。

你想要写下这样的条件：

function panel(id) {
    var toggle = $('#'+$(id).attr('id')+'_pan');
    if ($(id).html() == 'Learn more »') {
    $(id).html('Close panel «');
    toggle.slideDown('600'); }
    else if ($(id).html() == 'Close panel «') {
    toggle.slideUp('600');
    $(id).html('Learn more »') }
}

Answer 3

onclick="panel(this)"将发送一个DOM对象，而不是一个ID。你需要：

var toggle = '#' + id.id + '_pan'

Answer 4

您正在将对象this传递给您的函数，而不是this.id，因此您可以通过更改函数来完成所需的操作，如下所示：

function panel( obj ) {
    var selector = '#' + obj.id,
        $this = $( selector );
    if ($this.html() == 'Learn more »') {
      $this.html('Close panel «');
      $(toggle).slideDown('600'); // I assume toggle is a global variable assigned elsewhere
    } else if ($this.html() == 'Close panel «') {
      $(toggle).slideUp('600');
      $this.html('Learn more »') 
    }
}

注意我还将您的条件更改为$this.html() == 'content'以正确进行测试。

Answer 5

更改您的代码，您没有正确使用ID。

function panel(id) {
        //id is the WHOLE DOM ELEMENT
        if ($(id).html('Learn more »')) {
        $(id).html('Close panel «');
        $(toggle).slideDown('600'); }
        else if ($(id).html('Close panel «')) {
        $(toggle).slideUp('600');
        $(id).html('Learn more »') }
    }

<a id="TABPAN_padi_training" href="#" onclick="panel(this); return false">
  Learn more &raquo;
</a>