jQuery

Question

我创建了一组问题和答案。

HTML:

<div class="faq" id="faq_1">
    <div class="question"><p class="qtext">Theard</p><span class="qshow">+</span></div>
    <div class="answer">

        <div class="faq" id="faq_2">
            <div class="question"><p class="qtext">Question?</p><span class="qshow">+</span></div>
            <div class="answer" id="faq_2a">
                <p class="aodp">
                    Answer...
                </p>
            </div>
        </div>

    </div>
</div>

jQuery:

$('.question').click(function() { ShowFAQ('#' + $(this).parent().attr("id"));   } );

        var faq_arr = [];
        function ShowFAQ(el)
        {
            if($.inArray(el, faq_arr) == -1) faq_arr[el] = 0; //if not exist = set default value.

            if(faq_arr[el] == 0) { $(el + ' .answer:first' ).slideDown(); faq_arr[el] = 1; $(el + ' .qshow:first').text('-'); }
            else { $(el + ' .answer:first').slideUp(); faq_arr[el] = 0; $(el + ' .qshow:first').text('+'); }
        }

它工作得很好，但在 "ShowFAQ" 中不执行 'else' 中的代码。我知道这是“$.inArray”的问题。我不想手动打印出 ID 元素。我该如何解决这个问题？

Answer 1

问题是您正在使用数组，但参数是字符串，而不是索引。

发生的事情是您通过执行 faq_arr[el] = 0; 将属性添加到数组中。不幸的是，$.inArray 只检查数组的索引，忽略属性。

不要使用数组，而是使用对象。简单地做：

var faq_arr = {};

和：

if(typeof faq_arr[el] === 'undefined') faq_arr[el] = 0;

Answer 2

要实现这一点，您可以考虑使用 .data() 来存储 [=24]，而不是将状态存储在 array 中=]state show or hide, 更容易维护和理解。

$('.answer').hide();

$('.question').click(function() {
    ShowFAQ('#' + $(this).parent().attr("id"));
});

function ShowFAQ(el) {
    var $el = $(el);
    var show = $el.data('show'); // get current state

    if (!show) {
       $(el + ' .answer:first').slideDown();
       $(el + ' .qshow:first').text('-');
    } else {
       $(el + ' .answer:first').slideUp();
       $(el + ' .qshow:first').text('+');
    }
   
    $el.data('show', !show); // set oposite to obtain show/hide effect
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq" id="faq_1">
  <div class="question">
    <p class="qtext">Theard</p><span class="qshow">+</span>
  </div>
  <div class="answer">
    <div class="faq" id="faq_2">
      <div class="question">
        <p class="qtext">Question?</p><span class="qshow">+</span>
      </div>
      <div class="answer" id="faq_2a">
        <p class="aodp">
          Answer...
        </p>
      </div>
    </div>
  </div>
</div>

Answer 3

您的代码无法正常工作的原因是

$.inArray(el, faq_arr)

为 el 检查 fay_arr 的值，但您需要检查键。我建议：

if(faq_arr[el] === undefined)

或

if(typeof faq_arr[el] === 'undefined')

或参见this fiddle。

编辑： Karl-André Gagnon 的回答也非常值得一读，因为您真的应该考虑使用对象而不是数组对于非数字键。它 也可以 与数组一起使用，并且 技术上 很好，但我很确定它被认为是相当 糟糕的做法.

Answer 4

var faq_arr = [];
function ShowFAQ(el)
{    
    if($.inArray(el, faq_arr) == -1) { 
        $(el + ' .answer:first' ).slideDown(); faq_arr.push(el); $(el + ' .qshow:first').text('-'); 
    }
    else { 
        $(el + ' .answer:first').slideUp(); faq_arr[el] = 0; $(el + ' .qshow:first').text('+'); 
    }
}

jQuery - 带有元素 ID 的 inArray - 'else' 不工作

jQuery - inArray with ID of elements - 'else' not working

javascript

if-statement

slideup