Используйте jQuery для получения имени из элемента, который будет использоваться для другого элемента

0

Мне нужно вытащить имя из элементов, которые скрыты от пользователя (style = "display: none") и использовать его для другого элемента, который находится в модальном (и отображается пользователю при активации).

Модальные поля:

<div class="productAttributeList" style="display: none">
<div class="productAttributeRow productAttributeConfigurableEntryText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">Gift Message:</span>
        </label>
    </div>
    <div class="productAttributeValue">
    <input type="text" class="Field validation productAttributeFluidWidth"
        name="attribute[141]" value=""  />
    </div>
    <div class="cf"></div>
</div>
<div class="productAttributeRow productAttributeConfigurableEntryText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">Delivery Date:</span>
        </label>
    </div>
    <div class="productAttributeValue">
    <input type="text" class="Field validation productAttributeFluidWidth"
        name="attribute[177]" value=""  />
    </div>
    <div class="cf"></div>
</div>

Видимые поля:

<div class="modal hide fade in" id="product-options">                    
<div class="modal-header center">
    <a class="close modal-close l-m" data-dismiss="modal" 
aria-hidden="true">x</a>                
</div>         
<div class="modal-body ll-m r-m">
    <!--- Delivery Date Field --->
    <div id="datepickerDiv">                   
        <label for="datepicker" class="name rl-m">Desired Delivery Date:</label>
        <br />           
        <input type="text" class="Field validation productAttributeFluidWidth 
rl-m" id="datepicker" value="" placeholder="ex. 01/01/2013"/>    
        <div class="cf"></div>                     
        <hr />
    </div>
    <!---- Gift Message ---->
    <div id="GiftMessageOption" class="top-m btm-m">
        <h5>Gift Message</h5>                    
        <label for="giftMsg">
            <small>Please type your desired message (optional)</small>:<br />
        </label>                       
        <textarea class="Field validation productAttributeFluidWidth" 
id="giftMsg" value=""></textarea>                       
        <div class="cf"></div>                    
    </div> 
</div><!-- end of modal body-->   
<div class="modal-footer">                           
    <button id="modalCancel" class="btn btn-small" data-dismiss="modal" 
aria-hidden="true">Cancel</button>        
    <button href="#" id="addtocart" class="btn btn-small btn-warning">
<i class="icon-shopping-cart icon-white"></i>&nbsp;Add To Cart</button>        
</div><!-- end of modal footer -->       

Из скрытых полей я хочу получить имя из первого ввода [type = "text"] и использовать его для ввода [type = "text"] id #datepicker в модальном режиме. Также из скрытых полей я хочу получить имя из второго ввода [type = "text"] и использовать его для ввода [type = "text"] id #giftMsg в модальном режиме. Недавно у меня была аналогичная проблема и я использовал jQuery.attr('name'), но не могу понять, как ее применять здесь... с трудом выясняя, как вызывать значения, поскольку метки и входы для скрытые поля находятся в разных div, разделяющих одни и те же классы. Скрытые поля генерируются сервером корзины покупок, поэтому я не могу их изменять, тогда как я создал модальный, а поля в нем полностью редактируются.

Вот что я пытался безуспешно:

<script>      
$("#datepicker").attr('name',
$(".productAttributeConfigurableEntryText span.name:contains('(Standard)') input[type=text]").attr('name')); 

$("#giftMsg").attr('name',
$(".productAttributeConfigurableEntryText span.name:contains('(Gift Message)').productAttributeValue input[type=text]").attr('name')); 
</script>

Fiddle здесь: Fiddle

Спасибо.

  • 0
    эй, Сьюзен ... должен удалить visible ссылки ... помните, модальное не видно при загрузке страницы
  • 0
    Ах, теперь я понимаю, что вы имеете в виду. Ладно, скоро сделаю, спасибо. Мне было интересно, почему мои посты получили отрицательный голос. Может помочь, если вы добавите комментарий с объяснением, когда будете понижать голос, чтобы можно было учиться и исправлять ошибки. ;-)
Показать ещё 2 комментария
Теги:

1 ответ

1
Лучший ответ

Здесь более организованный подход, зная, что радиоприемники могут быть включены:

/* collect all the inputs, radio, textarea and select*/
var originalInputs=$('.productAttributeList  :input');

var newElArray=[
   /* selector , index of original input*/
  ['#datepicker',0],
   ['#giftMsg',1]
   /* add a selector/index for radios*
]

/* now use index of original input to match to modal fields*/
$.each(  newElArray,function(i,arr){
    var newName= getInputName( arr[1])
     $(arr[0]).attr('name', newName);
     /* simple way to test, display name beside elemnt*/
    $(arr[0]).after( newName);
})



function getInputName( index){
     return originalInputs.eq(index).attr('name');
}

Теперь просто перейдите и добавьте [idSelector,index] в newElArray для каждого из входов, которые вам нужно назвать

DEMO

  • 0
    Я добавил утилиту, чтобы увидеть все доступные элементы, теперь должно быть легко сделать сопоставление, можно также использовать для радио.
  • 0
    charlietfl, спасибо за помощь мне сегодня, очень ценю это. Я все еще работаю над попыткой заставить это работать ... возможно, что-то я делаю неправильно, но пока безуспешно. Думаю, мне придется позвонить ночью и попробовать еще раз утром. Я приму и одобряю ответ, как только смогу это сделать. Держа пальцы скрещенными! Еще раз спасибо!!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню