0

どちらにも選択/オプションがある2つのフォームがあります(以下の例)。私の目的は、ユーザーがオプションの 1 つを選択すると、値が関数を介して渡され、ハイパーリンク文字列に挿入されるようにすることです。最初のフォームは正常に動作しますが、2 番目のフォームを実行して同じ関数を使用すると、最初のフォームと衝突するようです。コピー、貼り付け、名前の変更を行わずにこの関数を再利用して、スクリプトが巨大になるため、2 番目に機能する方法はありますか?

<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 を持つ 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/

アップデート

yourselectから正しい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 に答える