更新隐藏字段 - jquery

Question

好的，试着正确地解释这一点，因为我认为这就是为什么一个答案逃避我和一些用户给我的否定答复，因为他们认为我没有尝试过研究解决这个问题。

我有一个页面，用户在幻灯片查看器中呈现图像。幻灯片查看器中的每个项目都在LI元素内。

当用户选择幻灯片，然后提交表单时，我需要脚本来更新隐藏字段，以便我们可以将他们选择的幻灯片放入表单中。无论是通过更新onclick还是表单提交时，都不重要。隐藏字段包含当时显示的图像的URL。

所以，我目前拥有的代码是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script> 

<!-- this is the slideviewer code --> 
<script src="/js/jquery.slideviewer.1.2.js" type="text/javascript"></script> 

<!-- this is what I have been trying to update the hidden field --> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#wl_add").submit(function (event) { /* form name and id = wl_add */ 
$('input[name="item_pic_url"]').val($('#mygalthree img').attr('src')); 
}); 
}); 
</script> 

<!-- the div containing the slide viewer --> 
<div id="mygalthree" class="svw"><ul> 
<?PHP 

foreach($html->find('img') as $e){ // from simple_html_dom 

    $image = $e->src; 

    echo '<li><img src="'.$image.'" width=300 alt="" /></li>'; 

} 

// the hidden field to be updated - i am presuming needs to be after the loop which feeds the LI elements 
echo '<input type="hidden" name="item_pic_url" value="'.$image.'" />'; 

?> 

</ul></div> 

或者，它会更容易每次选择一个幻灯片的时间来更新隐藏字段？下面你可以看到代码为slideviewer - 我本来以为我也许能增加

$（ '输入[名称= “item_pic_url”]'）VAL（$（ '＃mygalthree IMG'） .attr（ 'SRC'））;

当用户点击？但是我找不到要添加这个的地方，而且我已经尝试过几乎每一行！ Slideviewer code：

jQuery(function(){ 
    jQuery("div.svw").prepend("<img src='/images/spinner.gif' class='ldrgif' alt='loading...'/ >"); 
}); 
var j = 0; 
var quantofamo = 0; 
jQuery.fn.slideView = function(settings) { 
    settings = jQuery.extend({ 
     easeFunc: "easeInOutExpo", 
     easeTime: 750, 
     uiBefore: false, 
     toolTip: false, 
     ttOpacity: 0.9 
    }, settings); 
    return this.each(function(){ 
     var container = jQuery(this); 
     container.find("img.ldrgif").remove(); 
     container.removeClass("svw").addClass("stripViewer");  
     var pictWidth = container.find("img").width(); 
     var pictHeight = container.find("img").height(); 
     var pictEls = container.find("li").size(); 
     var stripViewerWidth = pictWidth*pictEls; 
     container.find("ul").css("width" , stripViewerWidth); 
     container.css("width" , pictWidth); 
     container.css("height" , pictHeight); 
     container.each(function(i) { 
    (!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>");    
     jQuery(this).find("li").each(function(n) { 
     jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");            
     }); 
     jQuery("div#stripTransmitter" + j + " a").each(function(z) { 
     jQuery(this).bind("click", function(){ 
     jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow! 
     var cnt = -(pictWidth*z); 
     container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc); 
     return false; 
     }); 
     }); 


     container.bind("click", function(e){ 
      var ui = (!settings.uiBefore) ? jQuery(this).next().find("a.current") : jQuery(this).prev().find("a.current"); 
      var bTotal = parseFloat(jQuery(this).css('borderLeftWidth').replace("px", "")) + parseFloat(jQuery(this).css('borderRightWidth').replace("px", "")); 
      var dOs = jQuery(this).offset(); 
      var zeroLeft = (bTotal/2 + pictWidth) - (e.pageX - dOs.left); 

      if(zeroLeft >= pictWidth/2) { 
       var uiprev = ui.parent().prev().find("a"); 
       (jQuery(uiprev).length != 0)? uiprev.trigger("click") : ui.parent().parent().find("a:last").trigger("click");       
      } 
      else { 
       var uinext = ui.parent().next().find("a"); 
       (jQuery(uinext).length != 0)? uinext.trigger("click") : ui.parent().parent().find("a:first").trigger("click"); 
      } 
     }); 


     jQuery("div#stripTransmitter" + j).css("width" , pictWidth); 
     jQuery("div#stripTransmitter" + j + " a:first").addClass("current"); 
     jQuery('body').append('<div class="tooltip" style="display:none;"><\/div>'); 


     if(settings.toolTip){ 
     var aref = jQuery("div#stripTransmitter" + j + " a"); 

     aref.live('mousemove', function(e) { 
     var att = jQuery(this).attr('title'); 
     posX=e.pageX+10; 
     posY=e.pageY+10; 
     jQuery('.tooltip').html(att).css({'position': 'absolute', 'top': posY+'px', 'left': posX+'px', 'display': 'block', 'opacity': settings.ttOpacity}); 
     }); 
     aref.live('mouseout', function() { 
     jQuery('.tooltip').hide(); 
     });    
     } 
     }); 
     j++; 
    }); 
}; 

Answer 1

OK，这已经让我疯狂，但现在问题解决了......在实际slideviewer代码，当用户选择的图像的数量，我添加了一个简单的onclick写的价值隐藏的领域。

jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#' onClick=\"document.wl_add.item_pic_url.value='" + jQuery(this).find("img").attr("src") + "'\" >"+(n+1)+"<\/a><\/li>"); 

感谢您的建议。

Answer 2

我会做的，而不是更新隐藏的领域，是分配每个图像作为一个单选按钮的标签。然后，当您提交表单时，它将提交该单选按钮的值。您需要将单选按钮定位在-9999或其他位置，以便实际的按钮不显示。

<label> 
    <img src="imagelocation.jpg" /> 
    <input type="radio" name="coolName" value="image_1" style="margin-left:-99999px;> 
</label> 

当点击图片时，会选择该单选按钮，该值将与表单一起提交。

Answer 3

我建议跟Josh V.K.一样。但没有这种可笑的定位黑客。

<label> 
    <img src="imagelocation.jpg" /> 
    <input type="radio" name="coolName" value="image_1" style="display: none;" /> 
</label>