Question

我有2个jquery脚本，我一直在努力，我现在必须将它们合并在一起制作最终的脚本。

这是克隆形式的第一部分。

function updateClonedInput(index, element) {
    $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" +  index);
    $(element).find(">:first-child").attr("id", "upload_image_link_" + index);
    $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
    $(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}

$(document).on("click", ".clone", function(e){
    e.preventDefault();
    var cloneIndex = $(".clonedInput").length + 1;
    var new_Input = $(this).parents(".clonedInput").clone();
    updateClonedInput(cloneIndex, new_Input);   
});
$(document).on("click", "button.remove", function(e){
e.preventDefault();
    if($('.clonedInput').length > 1) {
        $(this).parents(".clonedInput").remove();

        $(".clonedInput").each( function (cloneIndex, clonedElement) {
            updateClonedInput(cloneIndex + 1, clonedElement);
        })
    }

});

这是允许我上传图像的第二部分。

// Media Upload Button 1
var custom_uploader;
$('#show_upload_image_link_button_1').click(function(e) {
    e.preventDefault();
    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
     return;
    }
    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
    title: 'Choose Image',
    button: {
        text: 'Choose Image'
    },
     multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('#upload_image_link_1').val(attachment.url);
    });
    //Open the uploader dialog
    custom_uploader.open();
});

这适用于第一种形式，但随着形式递增，div id会发生变化。

这是行

$('#show_upload_image_link_button_1').click(function(e) {

和

$('#upload_image_link_1').val(attachment.url);

需要改变，即＃show_upload_image_link_button_1需要＃show_upload_image_link_button_2,3等等

我以前做过一次，现在我不记得我是怎么做到的。

这是html / php部分只是加入

$hero_options = get_option( 'hero_options' ); 
$count=count($hero_options);
$totalimg=$count-4;
$html = '<div id="upload_image_sets">';
if( isset( $hero_options['upload_image_link_1'] ) && $hero_options[ 'upload_image_link_1' ] ) { 
for($i=1;$i<=$totalimg;$i++){ 
    $html .= '<div id="clonedInput'.$i.'" class="clonedInput">';
    $html .= '<input type="text" id="upload_image_link_'.$i.'" size="36" name="hero_options[upload_image_link_'.$i.']" value="' . $hero_options['upload_image_link_'.$i.''] . '" />';

    $html .= '<input id="show_upload_image_link_button_'.$i.'" class="button upload_images" type="button" value="Upload Image" />';

    $html .= '<div class="actions">
    <button class="clone">Clone</button> 
    <button class="remove">Remove</button>
</div>
</div>';
}}
$html .= '</div>';

    echo $html;

Answer 1

如何使用类并只循环到最后一个元素？

在递增div时单击事件

1 个答案: