Javascript 排序在 Firefox 中有效,在 Chrome 中无效

标签 javascript google-chrome firefox

Javascript 排序在 Firefox 中有效,但在 Chrome 中无效。只是一个简单的选择,将用户带到一个新的 url。我可以进行哪些修改以使其适用于所有浏览器?

Stackoverflow 说我需要更多解释文本。尽管我认为这是一个相当简单的问题。用户选择一个选项并被定向到一个新的 url。代码在 Firefox 中重定向,但在 Chrome 中不重定向。我没有检查其他浏览器。

function url() {
  var value1 = $("#sort").val();
  var currentURL = window.location.href;

  if (window.location.href.endsWith("/")) {
    var str1 = (currentURL + '?');
  } else if (window.location.href.includes('&orderby')) {
    var str1 = (currentURL.split('&orderby')[0] + '&');

  } else if (window.location.href.includes('?orderby')) {
    var str1 = (currentURL.split('?orderby')[0] + '?');

  } else {
    var str1 = (currentURL + '&');
  }


  if (value1 == 'sort1') {
    window.location.href = str1 + "orderby=date&order=dsc";
  }
  if (value1 == 'sort3') {
    window.location.href = str1 + "orderby=date&order=asc";
  }
  if (value1 == 'sort5') {
    window.location.href = str1 + "orderby=title&order=dsc";
  }
  if (value1 == 'sort7') {
    window.location.href = str1 + "orderby=title&order=asc";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort" class="sorts2">
  <option class="sorts-option" value="">Sort</option>
  <option class="sorts-option" value="sort1" onclick="url()">Latest</option>
  <option class="sorts-option" value="sort3" onclick="url()">Oldest</option>
  <option class="sorts-option" value="sort5" onclick="url()">Title DSC</option>
  <option class="sorts-option" value="sort7" onclick="url()">Title ASC</option>
</select>

最佳答案

选择 <option>不会触发 click Chrome 中的事件。尝试收听 change <select> 上的事件相反:

$('#sort').on('change', url);

function url(e) {
  console.log('url running');
  var value1 = $("#sort").val();
  var currentURL = window.location.href;

  if (window.location.href.endsWith("/")) {
    var str1 = (currentURL + '?');
  } else if (window.location.href.includes('&orderby')) {
    var str1 = (currentURL.split('&orderby')[0] + '&');

  } else if (window.location.href.includes('?orderby')) {
    var str1 = (currentURL.split('?orderby')[0] + '?');

  } else {
    var str1 = (currentURL + '&');
  }

  console.log('insert code to assign to window.location.href here...');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort" class="sorts2">
  <option class="sorts-option" value="">Sort</option>
  <option class="sorts-option" value="sort1">Latest</option>
  <option class="sorts-option" value="sort3">Oldest</option>
  <option class="sorts-option" value="sort5">Title DSC</option>
  <option class="sorts-option" value="sort7">Title ASC</option>
</select>

关于Javascript 排序在 Firefox 中有效,在 Chrome 中无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54977630/

相关文章:

javascript - Twitter Bootstrap 模态滑入

javascript - 如何使此联系​​表具有互动性并反射(reflect)信息?

JavaScript -> 未捕获类型错误 : Failed to execute 'appendChild' on 'Node'

html - 网格布局中的 block 级链接元素,chrome 中的怪癖

javascript - 如何确定applicationCache是​​否已在firefox中获得批准

javascript - 需要帮助编写 js 函数来更改调用它的按钮的类

python - 在 Selenium Chromedriver、Python 中禁用 CSS 和图像

javascript - jQuery Ajax post 请求在 Chrome 上停留在挂起状态

javascript - 在 Firefox 中生成 'custom colour dialog'

css - Firefox 无法正确呈现菜单图像