多次根据 url 更改元素 css 而无需重新加载页面（需要 AJAX）

Question

我正在尝试向 Wordpress 主题的“搜索过滤器部分”添加条件（这就是我使用的选择器不简单的原因）。

有一个带有选项的下拉列表（它们是分类法，在英文“types-of-seating”中称为“tipo-de-montaje”），我需要根据下拉值显示元素。

The catch seems that what I'm trying to do works once, then when another option from dropdown is selected, I would need to reload the page in order to hide the current element and show the new one.

第一个问题是我是否首先需要 AJAX？

这是我的第二次尝试：

//Get the value of the selected option (from a dropdown)
var montajeVal = $('input[name="tipos-de-montaje"]').val();
//The containers of the elements that will be shown or hidden
const escuelaMax = $('[data-name="max-capacidad-escuela"]').parent();
const auditorioMax = $('[data-name="max-capacidad-auditorio"]').parent();
//First, they are hidden  
escuelaMax.hide();
auditorioMax.hide();
//Now, show the correct one
if (montajeVal == "escuela") {
        escuelaMax.show();
        auditorioMax.hide();
} else if (montajeVal == "auditorio")  {
        escuelaMax.hide();
        auditorioMax.show();
}
//This works only one time :(

//Maybe the JSON should contain data which $montajeVal should be compare with, check that in a loop and then accomplish what I tried to do in the IF statement above
// JSON would be just: ['escuela', 'auditorio']
//I'm using just 2 values for keeping it simple, but in reality there are more.

Answer 1

对于动态加载，您需要 AJAX（如您所写）。对于 AJAX，您需要： 1. 在前端发起AJAX调用的代码（准备并发送请求）

1. 在服务器端处理请求的代码（接收请求、验证、验证、准备要发回的数据并将其发送回前端）

2. 处理前端动态接收数据的代码

在 sn-p 中，我无法真正创建应该在您的服务器上的代码（因为没有给出服务器数据、编码语言等），但是 1. 和 2。 可以显示 - 所以我尝试模拟您的数据和函数。

jQuery(document).ready(function($) {
  // this "load-data" is not supposed to be in your code -
  // an event based on URL load should be here
  $('.load-data').on('click', async function() {
    const type = $(this).attr('data-name')
    const capacity = await getCapacity(type)
    toggleDisplay(type, capacity.length)
  })
});

// code mocking getting the capacity of a theater or
// a banquet (posts and users in this code)
function getCapacity(type) {
  return new Promise((resolve, reject) => {
    fetch(`https://jsonplaceholder.typicode.com/${type}`)
      .then(response => response.json())
      .then(json => resolve(json))
  })
}

// this function can be written shorter if the data-name
// properties match the requested item's real type (like
// theaters and banquets)
function toggleDisplay(type, capacity) {
  if (type === 'posts') {
    jQuery('#theater-container').show()
    jQuery('#banquet-container').hide()
    jQuery('#theater-container').find('[data-name="theater-capacity"]').text(capacity)
  } else {
    jQuery('#theater-container').hide()
    jQuery('#banquet-container').show()
    jQuery('#banquet-container').find('[data-name="banquet-capacity"]').text(capacity)
  }
}

[id*="container"] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="load-data" data-name="posts">Theaters</button><br />
<button class="load-data" data-name="users">Banquets</button>
<div id="theater-container">
  <h2>Theater capacity</h2>
  <div data-name="theater-capacity"></div>
</div>

<div id="banquet-container">
  <h2>Banquet capacity</h2>
  <div data-name="banquet-capacity"></div>
</div>

由于 sn-p 不是针对您的数据源定制的，它只能帮助您查看解决方案的过程。最大的区别在于 click 加载数据与 URL 更改 加载数据相比 - 但当我读到您时，您发现了这一点。