Question

目前，我有一个基于表单选择生成的单词列表。当选择改变时，单词也会改变。我想要添加的是一个包含URL中生成的单词的简单链接。

特别是，在jsfiddle.net/9v9xu266/中，我根据选择了CheckBoxPreference，apple和orange生成了一个列表。例如，如果我只选择pear和apple，那么我的列表会说

pear

我要添加的内容，在此列表下方，是以下链接：

-o Farmer1 Farmer2

也就是说，在网址中的<a href="XX.XX.XX.XX/exec?args=Farmer1%20Farmer2>Click Me</a>之后，我总是想要以空格分隔的单词列表。

所以，正如你所看到的，“繁重的举动”（例如它）已经在这里完成了。但我不知道如何动态调整网址。

Answer 1

由于您已经输出了大部分所需的字词，因此可以尝试http://jsfiddle.net/9v9xu266/1/

＆＃13;

$(document).ready(function() {
  $(":checkbox").prop("checked", false);
  $('table td:not(:first-child)').hide();
  $('table tr:not(:first-child)').hide();

  updateTestList();
  $("#testListClickContainer").click(function() {
    $("#testList").toggle();
    $("#hideTestList").toggle();
    $("#showTestList").toggle();
  });

  $("#xor").click(function() {
    if ($(this).is(':checked')) {
      xorRows();
    } else {
      showOrHideRows();
    }
    updateTestList();
  });

  $(".type", "#optionBoxes").click(function() {
    if ($(this).is(':checked')) {
      showColumn(this.name);
      showOrHideRows();
      if (document.getElementById('xor').checked) {
        xorRows();
      }
    } else {
      hideColumn(this.name);
      showOrHideRows();
      if (document.getElementById('xor').checked) {
        xorRows();
      }
    }
    var tests = "-o";
    $("#tableResult tr:visible:not(:first-child) td:first-child").each(function() {
      tests = tests.concat(" ");
      tests = tests.concat($(this).text());
    });
    $("#testList").text(tests);
    $('#link').attr('href', 'http://XX.XX.XX.XX/exec?args=' + tests.replace('-o ', ""));
    updateTestList();
  });
});

function xorRows() {
  $("#tableResult tr:not(:first-child)").show();
  $("#tableResult tr:not(:first-child)").each(function() {
    var filtered = false;
    var inValidColumns = $("td:visible:not(:first-child)", this)
      .filter(function() {
        filtered = true;
        return $(this).text() === 0;
      }).length;
    $(this).toggle(inValidColumns === 0 && filtered);
  });

}

function hideColumn(columnIndex) {
  $('#tableResult td:nth-child(' + (columnIndex) + ')').hide();
}

function showColumn(columnIndex) {
  $('#tableResult td:nth-child(' + (columnIndex) + ')').show();
}

function showOrHideRows() {
  $("#tableResult tr:not(:first-child)").show();
  $("#tableResult tr:not(:first-child)").each(function() {
    var validColumns = $("td:visible:not(:first-child)", this).filter(function() {
      return $(this).text() == 1;
    }).length;

    $(this).toggle(validColumns !== 0);

  });

}

function updateTestList() {
  var tests = "-o";
  if ($("#testList").is(":visible")) {
    alert('doing stuff');
    $("#tableResult tr:visible:not(:first-child) td:first-child").each(function() {
      tests = tests.concat(" ");
      tests = tests.concat($(this).text());
    });
    $("#testList").text(tests);
  }
}

＆＃13;

.cmdToCopy {
  background-color: #6699FF;
  color: white;
  width: 500px;
  font-family: monospace;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="options" onsubmit="return false">
  <b>xor:</b>
  <input type="checkbox" name="xor" id="xor" checked="" />XOR
</form>
<form name="tcol" onsubmit="return false">
  <b>Features:</b>
  <div id="optionBoxes">
    <input type="checkbox" name="2" class="type" checked="" />apple
    <input type="checkbox" name="3" class="type" checked="" />orange
    <input type="checkbox" name="4" class="type" checked="" />pear
  </div>
</form>
<div id="testListClickContainer">
  <a href="javascript:void(0);">
    <div id="hideTestList" style="display:none;">Hide test subset command</div>
    <div id="showTestList">Show test subset command</div>
  </a>
</div>
<p>
  <div id="testList" class="cmdToCopy" style="display:none;">List of tests.</div>
</p>
<table border="1" id="tableResult">
  <tbody>
    <tr>
      <td id="tcol1">Farmer #</td>
      <td id="tcol2">apple</td>
      <td id="tcol3">orange</td>
      <td id="tcol4">pear</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer1</td>
      <td name="tcol2" id="tcol2">1</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">1</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer2</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">1</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer3</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer4</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer5</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer6</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer7</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer8</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
    <tr>
      <td name="tcol1" id="tcol1" class="bold">Farmer9</td>
      <td name="tcol2" id="tcol2">0</td>
      <td name="tcol3" id="tcol3" class="italic">1</td>
      <td name="tcol4" id="tcol4">0</td>
    </tr>
  </tbody>
</table>
<a href="" id="link">Click Me</a>

＆＃13;

＆＃13; 顺便说一句，我添加的代码是：

<a href="" id="link">Click Me</a>

和

$('#link').attr('href','http://XX.XX.XX.XX/exec?args=' + tests.replace('-o ', ""));

Answer 2

您可以使用jQuery中提供的value函数。这会将javascript对象转换为URL表示。

如：

$.param

以下是一个例子：http://jsfiddle.net/m29r8xw3/

Answer 3

如果您已将数组中的项目作为字符串，则将它们连接到带有url的另一个字符串中。我不记得看过OP的小提琴，哎呀。

＆＃13;

var arr = ['farmer1', 'farmer2'];
var url = "https://example.com/exec?args=" + arr[0] + "%20" + arr[1];
console.log(url);

var in1 = document.getElementById("in1");
in1.addEventListener('change', function(event) {
  var in1Data = [];
  in1Data.push(in1.value);
  console.log(in1Data);
  var str = in1Data.toString();
  var args = encodeURIComponent(str);
  var base = "https://example.com/exec?args=";
  var out1 = document.getElementById('out1');
  return out1.value = base + args;
  event.stopPropagation();
}, false);

＆＃13;

<fieldset>
  <legend>modifyURL</legend>
  <div><small>Enter: Item1 Item2 ... ItemN+ (space delimited list)</small>
  </div>
  <label>Enter List:</label>
  <input id="in1" />
  <br/>
  <label>URL:</label>
  <output id="out1"></output>
</fieldset>

＆＃13;

如何在Javascript中修改URL

3 个答案: