Question

我有4个创建文本输出的按钮，因此“转到”按钮转到该文本输出中给定的链接。我仍然是javascript noob，正在考虑使用其他语言，但是有没有一种方法可以根据上次按下的按钮使.innertext成为变量？这是我想出的最好的逻辑，并且希望使其成为更有效的代码。

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>

<h1 id="changedText">Button changes this text</h1>


<button onclick="btn1()">Button1</button>
<button onclick="btn2()">Button2</button>
<button onclick="btn3()">Button3</button>
<button onclick="btn4()">Button4</button>
<br>

<button onclick="Go()">Go to Link Above</button>



<script>
function btn1() {
document.getElementById("changedText").innerText = "http://www.test- 
button-1.com";
}
function btn2() {
document.getElementById("changedText").innerText = "http://www.test- 
button-2.com";
}
function btn3() {
document.getElementById("changedText").innerText = "http://www.test- 
button-3.com";
}
function btn4() {
document.getElementById("changedText").innerText = "http://www.test- 
button-4.com";
}
</script>

如您所见，我的代码确实很脏，没有“转到”链接，我在想什么？

Answer 1

只需单击即可。无需定义4个功能。

{
  "query": {
    "bool": {
      "must": [
        {
          "match": {
            "rating": 0
          }
        }
      ],
      "filter": [
        {
          "geo_distance": {
            "geometry.coordinates": [
              12.3232,
              12.2323
            ],
            "distance": 200000,
            "distance_type": "plane",
            "validation_method": "STRICT",
            "ignore_unmapped": false,
            "boost": 1
          }
        }
      ],
      "adjust_pure_negative": true,
      "boost": 1
    }
  }
}

$("button").on("click", function() {
  var siteId = $(this).text().slice(-1);
  var url = "http://www.test-button-@.com";
  if (!isNaN(siteId)) {
    url = url.replace(/@/gi, siteId);
    $(this).text(url);
  }

});

Answer 2

$("button").on("click", function() {
  var url = $(this).data("url");
  $("#changedText").text(url);
  $("#goButton").data("url", url)
});
$("#goButton").click(function() {
  window.location.href = $(this).data("url");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="changedText">Button changes this text</h1>

<button data-url="http://www.test-button-1.com">Button1</button>
<button data-url="http://www.test-button-2.com">Button2</button>
<button data-url="http://www.test-button-3.com">Button3</button>
<button data-url="http://www.test-button-4.com">Button4</button>

<button id="goButton">Go to Link Above</button>

Answer 3

我认为您可以尝试使用输入标签，并且只要单击按钮，就可以将值属性分配给全局变量。然后，“执行”功能会将您的文本更改为：

    function Go(){
      document.getElementById("changedText").innerText = `http://www.test-${globalVariable}.com`;
    }

Answer 4

function setLink(link) {
  document.getElementById("changedText").innerText = link;
}

function Go() {
  document.location.href = document.getElementById("changedText").innerText;
}

<h1 id="changedText">Button changes this text</h1>


<button onclick="setLink('http://www.test-button-1.com')">Button1</button>
<button onclick="setLink('http://www.test-button-2.com')">Button2</button>
<button onclick="setLink('http://www.test-button-3.com')">Button3</button>
<button onclick="setLink('http://www.test-button-4.com')">Button4</button>
<br>

<button onclick="Go()">Go to Link Above</button>

如何在javascript中正确设置链接变量？

4 个答案: