Question

我正在尝试构建一个简单的常见问题解答页面，其中包含单击问题时slideDown和Up的答案。当用户点击带有“问题”类的内容时，我希望mytarget变为'＃'+ [该问题的ID] +'ans'，以便相应的答案向下滑动。

当我给它一个答案的ID时，toggleSlide部分可以工作;我不确定我的.click函数是错误的，还是我使用$（this），或两者兼而有之。

$(document).ready(function() {
    var qid = '';
    var mytarget = '';

    function toggleSlide() {
        if ($(mytarget).css('display') == 'none') {
            $(mytarget).slideDown(600, 'swing');
        }

        else if ($(mytarget).css('display') == 'block') {
            $(mytarget).slideUp(600, 'swing');
        }
    };

    $('.answer').hide();
    $('.question').click(function() {
        qid = $('this').id();
        mytarget = '#' + qid + 'ans';
        toggleSlide();
    });
});

Answer 1

试试这个：

$(function() {  // shorthand for $(document).ready()...
    $('.answer').hide(); // preferably div.answer if they are all <div>s
    $('.question').click(function() {
        // no need to check what it currently is, use slideToggle
        $('#' + this.id + 'ans').slideToggle(600, 'swing');
    });
});

Answer 2

更改自：

$('this').id();

要：

$(this).attr('id')

this是javascript中的关键字，而不是字符串。
jQuery中没有id函数，您可以使用.attr('id')获取ID id是DOM元素的属性。所以你可以使用它：this.id

$('.question').click(function() {
    qid = this.id;
    mytarget = '#' + qid + 'ans';
    toggleSlide();
});

Answer 3

不要这样做：qid = $('this').id();

执行：qid = $(this).attr('id');没有单引号

Answer 4

function toggleSlide(mytarget) {
  if ($(mytarget).css('display')=='none'){
      $(mytarget).slideDown(600, 'swing');}

  else if ($(mytarget).css('display')=='block'){
         $(mytarget).slideUp(600, 'swing');}
});

调用函数时，应传递参数：

  qid = $(this).id();
  mytarget= '#' + qid + 'ans';
  toggleSlide(mytarget);

我是否错误地使用$（this）或.click？

4 个答案: