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

它的工作很棒，但在＆＃34; ShowFAQ＆＃34;不会执行＆＃39; else＆＃39;中的代码。我知道这是＆＃34; $ .inArray＆＃34;的问题。我不想手动打印ID元素。我该如何解决这个问题？

Answer 1

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

通过执行faq_arr[el] = 0;，您正在向数组添加属性。不幸的是，$.inArray只检查数组的索引，属性被忽略。

不使用数组，而是使用对象。只需：

var faq_arr = {};

和：

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

Answer 2

要实现此目的，您可以考虑使用array存储状态，而不是将状态存储在.data()中show或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)

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

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'无效

4 个答案: