JQuery 获取动态值并填充隐藏的表单字段

您有多个元素共享同一个 ID - 这是错误的，可能会给您带来很多问题。

其中一个问题正是您现在面临的问题。

由于您没有元素的唯一 ID，因此代码将仅考虑第一个匹配项(在您的情况下为"黄色"匹配项(

要解决这个问题？让我们尽可能多地使用 jQuery，让它变得简单。另外，让我们修复一些 HTML 标记。请参考评论。

.HTML

<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->
<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
            <img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/212.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Yellow" />
    <input type="hidden" name="Product_Dir_1" value="digital-world" />
    <input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>
<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
            <img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/349.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Blue" />
    <input type="hidden" name="Product_Dir_1" value="abstract" />
    <input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>
<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
            <img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/353.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Red" />
    <input type="hidden" name="Product_Dir_1" value="abstract" />
    <input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>
<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
            <img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/129.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Purple" />
    <input type="hidden" name="Product_Dir_1" value="electric-effect" />
    <input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>
<div style="display:none">
    <div id="container">
        <div id="video"></div>
        <div id="doesit">
            <form name="myform" action="/thisurl.asp" method="post">
                <input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
                <input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
                <input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />
                <!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->
                <button class="addtobutton addtocart" type="submit"></button>
            </form>
        </div>
    </div>
</div>

jQuery (Javascript(：

// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.
var setFormValues = function(div) {
    // Getting the inputs values. The ones within the clicked div.
    // We look for the inputs which name starts with Product_...
    // Let's use .prop() instead of .val() because IE sometimes doesn's like it.
    var div = $(div);
    var productVid = $("input[name^='Product_Vid_']", div).prop("value");
    var productDir = $("input[name^='Product_Dir_']", div).prop("value");
    var productName = $("input[name^='Product_Name_']", div).prop("value");
    // Setting the form inputs values.
    $("#Product_color_16").prop("value", productVid);
    $("#Product_Dir_16").prop("value", productDir);
    $("#Product_Name_16").prop("value", productName);     
}
$(function () {
    // When the user clicks on one of the divs.
    $(".doneit").on("click", function () {
        setFormValues($(this));    
        return true;        
    });   
    // When the user clicks the cart button, on the video window.
    $(".addtocart").on("click", function() {
        // Here we need a bit of native Javascript.
        var videoPlaying = document.getElementById("video_video");
        if (typeof videoPlaying != "undefined") {
           var videoSource = videoPlaying.currentSrc;
           if (typeof videoSource != "undefined") {
               var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];
               // Check which div has an image which src 
               // matches the video filename.
               var image = $(document).find("img[src*='" + videoSourceFilename + "']");
               if (typeof image != "undefined") {
                   var divContainer = $(image).parent().parent().parent();
                   if (typeof divContainer != "undefined")
                       setFormValues($(divContainer));
               }
           }
        }
        return true;
    });     
});