Question

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

<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);
}

先谢谢你们

Answer 1

您似乎正在使用具有相同ID的select元素。这不起作用; 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/

更新

要从select遍历到正确的a.desturl，您需要将它们放在相同的相对位置，以便可以从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>

两个表单的问题选择与javascript函数冲突

1 个答案: