Question

我有一个索引页面，用户可以在其中填写表单，然后使用URL将表单条目传递给另一个页面。表单不过是一堆下拉菜单，用户可以选择要比较的国家/地区，而他们所在的国家/地区是首选。现在，根据URL字符串及其所在的国家/地区，我想在结果页面（country.html）上更改标题的背景图片。

这是一个独立的项目，因此它不能存在于任何服务器上，而只能存在于USB驱动器上。

URL字符串是这样输入的：

file：/// F：/country.html？co1 = Afghanistan＆co2 = Algeria＆co3 = Costa + Rica＆co4 = Angola

这是我用来获取国家/地区名称的代码；完美地运作。

<script>

     function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if (pair[0] == variable) { return pair[1].replace(/\+/g, ' ') }
       }
       return(false);



} 

      var country1 = getQueryVariable('co1'); // Country 1
      var country2 = getQueryVariable('co2'); // Country 2
      var country3 = getQueryVariable('co3'); // Country 3
      var country4 = getQueryVariable('co4'); // Country 4



</script>

这是我尝试使用的代码，试图将类添加到header标记时遇到了麻烦：

<header id="top">
    <script>
//   var country1 = getQueryVariable("co1");
    if (country1 = 'Afghanistan, Pakistan') {
        document.getElementById('top').addClass = 'masthead3';
    }
    else {
        document.getElementById('top').addClass = 'masthead2';
    };
  </script>

如果某些国家/地区指定为country1，我基本上想添加一个类，否则使用其他标头（masthead2）。

感谢您的协助。我确定我会在某个地方遇到所有错误，因为我认为这很容易。

解决方案：

<header id="top">
    <script>
//   var country1 = getQueryVariable("co1");
    if (country1 == "Afghanistan") {
        var element = document.getElementById("top");
        element.classList.add("masthead3")
    }
    else {
        var element = document.getElementById("top");
        element.classList.add("masthead2")
    };
  </script>

如何根据URL字符串更改CSS类？

0 个答案: