0

我有两种形式，其中都有选择/选项（下面的示例）。我的目的是，当用户选择其中一个选项时，该值将通过函数传递并插入到超链接字符串中。第一种形式工作正常，但在执行第二种形式并使用它不起作用的相同功能时，它似乎与第一种形式发生冲突。有没有办法在不复制、粘贴和重命名它的情况下重用这个函数，因为这会使脚本变得庞大？

<form>
  <select id="event_date_01" class="add_event_url">
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option>
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option>
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option>
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option>
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option>
    <option value="915593210">29th Oct 2012, 3pm-4pm GMT</option>
  </select>
</form>
<span class="webinarLink2">
  <a href="" target="_blank" class="desturl webinarLink">
    Register now &raquo;
  </a>
</span>

<form>
 <select id="event_date_02" class="add_event_url">
  <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option>
  <option value="175324970">27th Sept 2012, 3pm-4pm BST</option>
 </select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink">Register now &raquo;</a></span>
</form>

我正在使用的javascript如下

$(document).ready(function() {  
  if ($("select.add_event_url").length) {
    $("select.add_event_url").change(displayVals);
    displayVals();
  }
});

function displayVals() {
  var event_date = $("#event_date").val();
  $("a.desturl").attr('href', 'https://www2.gotomeeting.com/register/' + event_date);
}

提前谢谢各位

4

1 回答 1

1

您似乎正在使用具有相同 ID 的选择元素。这行不通；ID 必须是唯一的。

给两个<select>不同的 ID，但保持相同的类，并尝试这样的事情：

$(document).ready(function() {
    $("select.add_event_url").change(function(e) {
        var $select = $(this),
            event_date = $select.val(),
            baseurl = 'https://www2.gotomeeting.com/register/';
        $("a.desturl").attr('href', baseurl + event_date);
    });
});​

http://jsfiddle.net/74Lfg/1/

更新

为了从 your 遍历select到正确的a.desturl，您需要将它们放在相同的相对位置，以便它们可以从 from 遍历this。 http://jsfiddle.net/74Lfg/4/

$(document).ready(function() {
    $("select.add_event_url").change(function(e) {
        var $select = $(this),
            event_date = $select.val(),
            baseurl = 'https://www2.gotomeeting.com/register/';
        $select.closest('form').find('.webinarLink2 a.desturl').attr('href', baseurl + event_date);
    });
    $('select.add_event_url').trigger('change');
});​

HTML（注意第一个链接已移到表单内）：

<form>
  <select id="event_date_01" class="add_event_url">
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option>
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option>
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option>
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option>
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option>
    <option value="915593210">29th Oct 2012, 3pm-4pm GMT</option>
  </select>
<span class="webinarLink2">
  <a href="" target="_blank" class="desturl webinarLink">
    Register now &raquo;
  </a>
</span>
</form>

<form>
 <select id="event_date_02" class="add_event_url">
  <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option>
  <option value="175324970">27th Sept 2012, 3pm-4pm BST</option>
 </select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink">Register now &raquo;</a></span>
</form>​

或者，您可以为每个链接分配一个唯一 ID（以便您可以将其放置在页面中的任何位置）并将该 ID 作为data-属性添加到select元素。http://jsfiddle.net/74Lfg/5/

$(document).ready(function() {
    $("select.add_event_url").change(function(e) {
        var $select = $(this),
            event_date = $select.val(),
            baseurl = 'https://www2.gotomeeting.com/register/';
        $('#'+$select.data('targetlink')).attr('href', baseurl + event_date);
    });
    $('select.add_event_url').trigger('change');
});​

HTML：

<form>
  <select id="event_date_01" class="add_event_url" data-targetlink="targetlink1">
    <option value="124167826">4th Oct 2012, 2pm-3pm AEST</option>
    <option value="398017490">4th Oct 2012, 3pm-4pm BST</option>
    <option value="536485554">25th Oct 2012, 3pm-4pm AEDT</option>
    <option value="708861114">25th Oct 2012, 3pm-4pm BST</option>
    <option value="339435154">29th Oct 2012, 3pm-4pm AEDT</option>
    <option value="915593210">29th Oct 2012, 3pm-4pm GMT</option>
  </select>
<span class="webinarLink2">
  <a href="" target="_blank" id="targetlink1" class="desturl webinarLink">
    Register now &raquo;
  </a>
</span>
</form>

<form>
 <select id="event_date_02" class="add_event_url" data-targetlink="targetlink2">
  <option value="411491250">27th Sept 2012, 2pm-3pm AEST</option>
  <option value="175324970">27th Sept 2012, 3pm-4pm BST</option>
 </select> 
<span class="webinarLink2"><a href="" target="_blank" class="desturl webinarLink" id="targetlink2">Register now &raquo;</a></span>
</form>​​​​​​​​​​​​​​
于 2012-09-26T16:01:50.920 回答