Question

这里是新的，也是编程的新手。基本上，我要做的是创建一个包含3个选项的选择菜单，每个选项具有不同的值。我想用它来过滤搜索到的结果并通过Ajax调用。我附加了一个“数据”属性，看起来像“数据类型：0”，从SQL表列回显的是0。

到目前为止，这部分有效。当我选择时，我遇到的问题，例如值“0”。它将隐藏和过滤所有0和1的IF，第一个结果是“0”，它应该迭代每个被调用的对象（以Div的形式）并且不隐藏不匹配的对象，如果选择器值发生变化，我还要求返回先前过滤的结果。

我一直在尝试使用Jquery，因为我找不到一个不会过时的插件，所以下面是我的代码。到目前为止，它只是隐藏了一切，我的怀疑是，如果第一个结果匹配，那就是隐藏所有内容（即如果第一个结果是0并且选择器是，它将隐藏所有0和1）。我只是想不通为什么它不迭代。

function EMCfilt() {

    var filteroption = $("#filtlist").val();
    document.getElementById("filtlist").value;

    if (filteroption == '1') {
        $(".imghalf").each(function() {
            return $(".imghalf").data("emcscbi") == '1';
        })
        $('.imghalf').css('display', 'none');
        $(".imghalf").each(function() {
            return $(".imghalf").data("emcscbi") == '0';
        })
        $('imghalf').css('display', 'inline-block');
    } else if (filteroption == '0') {
        $(".imghalf").each(function() {
            return $(".imghalf").data("emcscbi") == '0';
        })
        $('.imghalf').css('display', 'none');

        $(".imghalf").each(function() {
            return $(".imghalf").data("emcscbi") == '1';
        })
        $('.imghalf').css('display', 'inline-block');
    } else if (filteroption == '') {
        $('.imghalf').css('display', 'inline-block ');
    }

}

如果您有任何建议/解决方案，我会非常感激。 .Imghalf是结果的html的一部分，它以卡片的形式出现。每张卡的父div都是.imghalf，因此它包含数据-emcscbi：x

感谢。

编辑：

这是为每张卡生成的html，这些是通过ajax调用的：

 .'<div class=imghalf id=imghalf data-emcscbi='. 
 $result['NotSingleFind?']. '>'

 .'<img  class=coinimg .$result['CoinID']. 'obv.jpg </img>'  ' if 
 file_exists(filename)) { echo $filename } else { echo 
 $emptyfile}; ' */
 .'<div class=listhalf>'
 .'<ul id=coincard>'
 .'<img  class=coinimg src=images/' . $filename . ' 
 onError="imgError(this);"</img>'
 .'<li class=coincarditem>'.' EMC NUMBER: '. $result['objNum']. '</li>'
 .'<li class=coincarditem>'. 
 htmlentities(mb_convert_encoding($result['Title'], 'UTF-8', 'ASCII'), 
 ENT_SUBSTITUTE, "UTF-8"). '</li>'
 .'<li class=coincarditem>'. 
 htmlentities(mb_convert_encoding($result['RulerName'], 'UTF-8', 
'ASCII'), 
ENT_SUBSTITUTE, "UTF-8"). '</li>'
.'<li class=coincarditem>'. $result['StateName']. '</li>'
.'<li class=coincarditemhidden id=coincarditemhidden>'.  
$result['NotSingleFind?']. '</li>'
.'<li class=coincarditem>'.'<a id=cardref href="#Focus_Result?
link='.$result['CoinID'].'" onclick="setTimeout(printurl, delay)">Full 
Record</a>'.'</li>'
.'</ul>'
.'</div>'
.'</div>';

执行搜索后，这将是最终输出：

<div class="imghalf" id="imghalf" data-emcscbi="1"><div 
class="listhalf"><ul id="coincard"><img class="coinimg" 
src="images/1001.0563obv.jpg" onerror="imgError(this);" <="" img=""><li 
class="coincarditem"> EMC NUMBER: 1001.0563</li><li 
class="coincarditem">Danelaw (Edward imitations)</li><li 
class="coincarditem">anon. (Viking imitations of Edward)</li><li 
class="coincarditem">Danelaw (880-924)</li><li 
class="coincarditemhidden" id="coincarditemhidden">1</li><li 
class="coincarditem"><a id="cardref" href="#Focus_Result?
link=1001.0563" onclick="setTimeout(printurl, delay)">Full Record</a>
</li></ul></div></div>

因此查询数据库中每条记录的其中一个片段，此时限制为50.我知道“filteroption”变量正确设置为1或0或更改值时为null。我使用了console.log（filteroption）来解决这个问题，因为你可以看到“data-”部分设置正确。

Answer 1

我构建了一个最小的例子来演示这个，我的jQuery是超级生锈的，所以我在vanilla JS中做到了。首先，我认为你的if / else块在逻辑上有点过于复杂，如果你在一组条件上进行过滤，通常最好抓住所有内容将其编辑为基本状态（不可见），然后只使匹配的部分变得可见。为了实现这一目标，我使用了一个可以轻松添加和删除的课程hidden。

在JavaScript中使用HTMLCollections，您将广泛使用Function.prototype.call方法，您可以使用该方法将类似数组的可迭代对象应用于数组函数（奇怪的是我知道）。我在这里使用ES6 Arrow函数进行回调，如果您愿意（或者需要支持旧版浏览器），您可以将这些函数分配给标准函数而不进行任何更改。您也可以将let和const换成var，但block scoping是惊人的：）

// Get your select dropdown by id (eg: $('#filtlist');)
const select = document.getElementById('filtlist');

// Apply an event listener with callback to select element
// (eg: select.on('change', callbackfunction());)
select.addEventListener('change', e => {
  // get all matching elements to classname ( $('.imghalf'); )
  const elements = document.getElementsByClassName('imghalf');
  
  // if selected option is '' make everything visible and return
  if (e.target.value === '') { 
    Array.prototype.forEach.call(elements, val => { val.classList.remove('hidden') });
    return; 
  }
  // grab and format selected option to a number
  const option = Number(e.target.value);
 
  //  Foreach is exactly what you would expect for each value in collection, do this function (maybe - $.each(elements, function); ) 
  Array.prototype.forEach.call(elements, val => { val.classList.add('hidden'); });
  // filter by matching data option to select option, returns HTMLCollection
  let visible = Array.prototype.filter.call(elements, val => Number(val.dataset.emcscbi) === option);
  // Make matching elements visible
  Array.prototype.forEach.call(visible, val => { val.classList.remove('hidden') })
});

.hidden { display: none }
.imghalf { width: 100%; height: 30px; border: 1px solid black; }
.odd { background-color: gray; }
.even { background-color: white; }

#filtlist { margin: 30px auto; }

<select id="filtlist">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<section class="example">
  <article class="imghalf odd" data-emcscbi="1"></article>
  <article class="imghalf even" data-emcscbi="2"></article>
  <article class="imghalf odd" data-emcscbi="1"></article>
  <article class="imghalf even" data-emcscbi="2"></article>
  <article class="imghalf odd" data-emcscbi="1"></article>
  <article class="imghalf even" data-emcscbi="2"></article>
  <article class="imghalf odd" data-emcscbi="1"></article>
  <article class="imghalf even" data-emcscbi="2"></article>
  <article class="imghalf odd" data-emcscbi="1"></article>
  <article class="imghalf even" data-emcscbi="2"></article>
</section>

修改

OP询问了事件回调中的e是什么。 select.addEventListener('change', e => {})

在JS中，您的回调函数将根据传递给它的函数来获取参数，因此在event listener的情况下，您将传递一个事件对象。您的回调函数应该知道如何处理该对象。如果你不需要它（function() {} OR () => {}），你可以忽略它，但它总是传递给你的回调。

通常（特别是在jQuery中），您会看到没有event参数的代码，但引用了this

$(selector).on('change', function() { console.log(this.value) }
selector.addEventListener('change', function() { console.log(this.value) }

这适用于标准函数，是event.target的常用简写，但ES6箭头函数lexically binds这是父母的范围（听起来很复杂，但它意味着你的箭头使用this指向它所调用的范围，而不是它自己的内部范围）

// Does not work as you would expect.
selector.addEventListener('change', () => { console.log(this.value) });

因此，当使用箭头函数（或者通常只是一个好习惯）时，您应该记住，事件的回调将传递给它们的事件对象。

const eventHandler = event => { /* do the things */ };
const eventAlsoHandler = function(event) { /* do the things */ };
function eventAnotherHandler(event) { /* do the things */ }
element.addEventListener('change', eventHandler);

在回答你的问题时，我使用的event.target可能是最常见的问题之一，但object中有很多有用的东西。其他真正常见的事情是preventDefault，stopPropagation。不同的事件还会添加其他属性（小例子，keyup事件为被按下的键的字符串表示添加event.key。

使用Ajax结果进行Jquery过滤

1 个答案:

修改