Как мы можем получить динамические выпадающие списки c для отображения определенных параметров c на основе предыдущего выпадающего списка и иметь возможность рандомизировать вывод? - PullRequest
Новая
       3

Как мы можем получить динамические выпадающие списки c для отображения определенных параметров c на основе предыдущего выпадающего списка и иметь возможность рандомизировать вывод?

0 голосов
/ 20 января 2020

Я пишу от имени кодера, на которого я работаю (ее программа чтения с экрана не очень хорошо работает с большинством сайтов кодирования; я буду пересылать ответы ей, чтобы попытаться, а затем сообщать о результатах) относительно настройки многоуровневого изображения в Imagick, используя jQuery и PHP, чтобы выбрать несколько раскрывающихся динамических c, при этом некоторые раскрывающиеся списки зависят от предыдущего (это относится к инструменту создания питомца сайта моделирования домашних животных, поэтому, например, первый выбор Виды, а затем различные цвета глаз, маркировка и т. Д. c доступны в зависимости от выбранного вида: выбор пола не влияет на отображаемое изображение или другие раскрывающиеся списки, но влияет на выходные данные инструмента создания и выбор фона. ВЛИЯЕТ на изображение, а также на вывод, но не на другие выпадающие списки). Выбор одного выпадающего за раз является своего рода работой, хотя изображение не обновляется при каждом выборе, как это должно быть. Также есть кнопка «Рандомизировать», которая должна выбрать случайный вид, пол, маркировку и т. Д. c в пределах определенных c параметров (скажем, только 1 - 5 маркировок, но случайное число из них и выбор случайных отдельных маркировок) , Кнопка «Рандомизировать» вообще не работает, она ссылается только на жестко заданные выпадающие списки и поэтому не может успешно создать изображение.

Инструмент можно посмотреть здесь: https://www.vulpesvatic.com/demo

Это текущий код (извините, он настолько велик, наш кодер имеет тенденцию работать в длинных форматах, предложения по его сжатию приветствуются): 

@extends('layouts.app')

{{-- Page Title --}}
@section('title')
Demo
@endsection

{{-- Page Content --}}
@section('content')
<div style="text-align: center;">
    <img src="data:image/png;base64,{{ base64_encode($output) }}" alt="Fox" id="fox" />
</div>
    <form action="{{ route('demo.process') }}" method="post" id="demo" role="form">
<h2>The Basics</h2>
<div>
    <label for="background_id">
        Background:
    </label>
    <select name="background_id" id="background_id" required>
        @foreach ($backgrounds as $b)
        <option value="{{ $b->id }}">{{ ucwords(str_replace('_', ' ', $b->name)) }}</option>
        @endforeach
    </select>
</div>
<div>
    <label for="species_id">
        Species:
    </label>
    <select name="species_id" id="species_id" required>
<option selected disabled>Select a Species</option>
        @foreach ($species as $s)
        <option value="{{ $s->id }}">{{ ucwords(str_replace('_', ' ', $s->name)) }}</option>
        @endforeach
    </select>
</div>
<div>
    <label for="gender">
        Gender:
    </label>
    <select name="gender" id="gender" required>
<option selected disabled>Select a Gender</option>
        <option value="Female">Female</option>
        <option value="Male">Male</option>
    </select>
    </div>
<div>
    <label for="fur_color_id">
        Fur:
    </label>
    <select name="fur_color_id" id="fur_color_id" class="options" required>
<option selected disabled>Select a Species</option>
    </select>
</div>
<div>
    <label for="skin_color_id">
        Skin:
    </label>
    <select name="skin_color_id" id="skin_color_id" class="options" required>
<option selected disabled>Select a Species</option>
    </select>
</div>
<div>
    <label for="claws_color_id">
        Claws:
    </label>
    <select name="claws_color_id" id="claws_color_id" class="options" required>
<option selected disabled>Select a Species</option>
    </select>
</div>
<div>
    <label for="eyes_left_color_id">
        Left Eye:
    </label>
    <select name="eyes_left_color_id" id="eyes_left_color_id" class="options" required>
<option selected disabled>Select a Species</option>
    </select>
</div>
<div>
    <label for="eyes_right_color_id">
        Right Eye:
    </label>
    <select name="eyes_right_color_id" id="eyes_right_color_id" class="options" required>
<option selected disabled>Select a Species</option>
    </select>
</div>
<h2>Markings</h2>
    <div id="markings">
    </div>
    <div>
        <button type="button" name="add_marking" id="add_marking">
            Add Marking
        </button>
    </div>
<h2>Tail Markings</h2>
<div id="tail_markings">
</div>
<div>
    <button type="button" name="add_tail_marking" id="add_tail_marking">
        Add Tail Marking
    </button>
</div>
<div>
    <button type="button" name="randomize" id="randomize">
        Randomize
    </button>
</div>
@if (auth()->check())
<div>
    <button type="button" name="create" id="create" disabled>
        Create
    </button>
</div>
@endif
<div>
    <button type="button" name="reset" id="reset">
        Reset
    </button>
</div>
</form>
@endsection

{{-- Page JS --}}
@section('js')
<script type="text/javascript">
$(function(){

// Global variables.
    var page = {
        check: false,
        isLoading: false
    };

// Populate the basic dropdowns according to the selected species.
    $('select#species_id').on('change', function(event) {
    $.ajax({
    type: "get",
    url: "{{ route('demo.basics') }}",
    dataType: "json",
    data: {
        option: $(this).val()
    },
    success: function(response) {

// Fur colors.
        $('select#fur_color_id').empty();
$.each(response.demo_fur_colors, function(key, value) {
    $('select#fur_color_id').append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
});

// Skin colors.
        $('select#skin_color_id').empty();
$.each(response.demo_skin_colors, function(key, value) {
    $('select#skin_color_id').append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
});

// Claws colors.
        $('select#claws_color_id').empty();
$.each(response.demo_claw_colors, function(key, value) {
    $('select#claws_color_id').append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
});

// Eyes left colors.
        $('select#eyes_left_color_id').empty();
$.each(response.demo_eye_colors, function(key, value) {
    $('select#eyes_left_color_id').append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
});

// Eyes right colors.
        $('select#eyes_right_color_id').empty();
$.each(response.demo_eye_colors, function(key, value) {
    $('select#eyes_right_color_id').append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
});

// Process..
if (event.originalEvent != undefined) {
    processDemo();
}

    }
});

});

$('select.options', 'input.options').on('change', function(event) {
    if (event.originalEvent != undefined) {
        processDemo();
    }
});

var marking_count = 0;
$('button#add_marking').on('click', function(){
    if (marking_count < 5) {
        $.ajax({
        type: "get",
        url: "{{ route('demo.markings') }}",
        dataType: "json",
        data: {
            option: $('#species_id').val()
        },
        success: function(response) {
            $('div#markings').append(
                '<div class="marking_options">'+
                '<div>'+
                '<label for="marking'+marking_count+'">'+
                'Marking:'+
                '</label>'+
                '<select name="marking[]" id="marking'+marking_count+'" class="marking options">'+
                '</select>'+
                '</div>'+
                '<div>'+
                '<label for="marking_color'+marking_count+'">'+
                'Color:'+
                '</label>'+
                '<select name="marking_color[]" id="marking_color'+marking_count+'" class="marking_color options">'+
                '</select>'+
                '</div>'+
                '<div>'+
                '<label for="marking_opacity'+marking_count+'">'+
                'Opacity:'+
                '</label>'+
                '<input type="range" name="marking_opacity[]" value="1" step="0.01" min="0" max="1" id="marking_opacity'+marking_count+'" class="marking_opacity options" />'+
                '</div>'+
                '<div>'+
                '<button type="button" name="remove_marking" id="remove_marking'+marking_count+'" class="remove_marking">'+
                'Remove Marking'+
                '</button>'+
                '</div>'+
                '</div>'
            );

// Markings.
            $('select#marking'+marking_count).empty();
$('select#marking'+marking_count).append('<option selected disabled>Select a Marking</option>');
    $.each(response.demo_markings, function(key, value) {
        $('select#marking'+marking_count).append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
    });

// Prevent duplicates.
    $('select.marking').each(function(){
        $('select.marking option[value="'+$(this).data('index')+'"]').prop('disabled', false);
        $(this).data('index', this.value);
        $('select.marking option[value="'+this.value+'"]:not([value=""])').prop('disabled', true);
        $(this).find('option[value="'+this.value+'"]:not([value=""])').prop('disabled', false);
    });

// Markings colors.
            $('select#marking_color'+marking_count).empty();
$('select#marking_color'+marking_count).append('<option selected disabled>Select a Marking Color</option>');
    $.each(response.demo_fur_colors, function(key, value) {
        $('select#marking_color'+marking_count).append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
    });

        }
    });

    marking_count ++;
}
else {
    alert('You can not add any more markings.');
}
});

$('div#markings').on('change', 'select.marking', function(event){
    $('select.marking option[value="'+$(this).data('index')+'"]').prop('disabled', false);
    $(this).data('index', this.value);
    $('select.marking option[value="'+this.value+'"]:not([value=""])').prop('disabled', true);
    $(this).find('option[value="'+this.value+'"]:not([value=""])').prop('disabled', false);
    if (event.originalEvent != undefined) {
        processDemo();
    }
});

$('div#markings').on('change', 'select.marking_color', function(event){
    if (event.originalEvent != undefined) {
        processDemo();
    }
});

$('div#markings').on('change', 'input.marking_opacity', function(event){
    if (event.originalEvent != undefined) {
        processDemo();
    }
});

$('div#markings').on('click', 'button.remove_marking', function(event){
    var marking = $(this).closest('div.marking_options').find('select.marking').val();
    $('select.marking').each(function(){
        $(this).find('option[value="'+marking+'"]').prop('disabled', false);
    });
    $(this).closest('div.marking_options').remove();
    if (event.originalEvent != undefined) {
        processDemo();
    }
    marking_count --;
});

var tail_marking_count = 0;
$('button#add_tail_marking').on('click', function(){
    if (tail_marking_count < 5) {
        $.ajax({
        type: "get",
        url: "{{ route('demo.tail-markings') }}",
        dataType: "json",
        data: {
            option: $('#species_id').val()
        },
        success: function(response) {
            $('div#tail_markings').append(
                '<div class="tail_marking_options">'+
                '<div>'+
                '<label for="tail_marking'+tail_marking_count+'">'+
                'Tail Marking:'+
                '</label>'+
                '<select name="tail_marking[]" id="tail_marking'+tail_marking_count+'" class="tail_marking options">'+
                '</select>'+
                '</div>'+
                '<div>'+
                '<label for="tail_marking_color'+tail_marking_count+'">'+
                'Color:'+
                '</label>'+
                '<select name="tail_marking_color[]" id="tail_marking_color'+tail_marking_count+'" class="tail_marking_color options">'+
                '</select>'+
                '</div>'+
                '<div>'+
                '<label for="tail_marking_opacity'+tail_marking_count+'">'+
                'Opacity:'+
                '</label>'+
                '<input type="range" name="tail_marking_opacity[]" value="1" step="0.01" min="0" max="1" id="tail_marking_opacity'+tail_marking_count+'" class="tail_marking_opacity options" />'+
                '</div>'+
                '<div>'+
                '<button type="button" name="remove_tail_marking" id="remove_tail_marking'+tail_marking_count+'" class="remove_tail_marking">'+
                'Remove Tail Marking'+
                '</button>'+
                '</div>'+
                '</div>'
            );
// Tail markings.
            $('select#tail_marking'+tail_marking_count).empty();
$('select#tail_marking'+tail_marking_count).append('<option selected disabled>Select a Tail Marking</option>');
    $.each(response.demo_tail_markings, function(key, value) {
        $('select#tail_marking'+tail_marking_count).append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
    });

// Prevent duplicates.
    $('select.tail_marking').each(function(){
        $('select.tail_marking option[value="'+$(this).data('index')+'"]').prop('disabled', false);
        $(this).data('index', this.value);
        $('select.tail_marking option[value="'+this.value+'"]:not([value=""])').prop('disabled', true);
        $(this).find('option[value="'+this.value+'"]:not([value=""])').prop('disabled', false);
    });

// Tail marking colors.
            $('select#tail_marking_color'+tail_marking_count).empty();
$('select#tail_marking_color'+tail_marking_count).append('<option selected disabled>Select a Tail Marking Color</option>');
    $.each(response.demo_fur_colors, function(key, value) {
        $('select#tail_marking_color'+tail_marking_count).append('<option value="'+value.id+'">'+ucwords(str_replace(value.name))+'</option>');
    });

        }
    });

    tail_marking_count ++;
    }
    else {
        alert('You can not add any more tail markings.');
    }
});

$('div#tail_markings').on('change', 'select.tail_marking', function(event){
    $('select.tail_marking option[value="'+$(this).data('index')+'"]').prop('disabled', false);
    $(this).data('index', this.value);
    $('select.tail_marking option[value="'+this.value+'"]:not([value=""])').prop('disabled', true);
    $(this).find('option[value="'+this.value+'"]:not([value=""])').prop('disabled', false);
    if (event.originalEvent != undefined) {
        processDemo();
    }
});

$('div#tail_markings').on('change', 'select.tail_marking_color', function(event){
    if (event.originalEvent != undefined) {
        processDemo();
    }
});

$('div#tail_markings').on('change', 'input.tail_marking_opacity', function(event){
    if (event.originalEvent != undefined) {
        processDemo();
    }
});

$('div#tail_markings').on('click', 'button.remove_tail_marking', function(event){
    var tail_marking = $(this).closest('div.tail_marking_options').find('select.tail_marking').val();
    $('select.tail_marking').each(function(){
        $(this).find('option[value="'+tail_marking+'"]').prop('disabled', false);
    });
    $(this).closest('div.tail_marking_options').remove();
    if (event.originalEvent != undefined) {
        processDemo();
    }
    tail_marking_count --;
});

$('button#randomize').on('click', function(){
    $('button.remove_marking').trigger('click');
    $('button.remove_tail_marking').trigger('click');
    markings = ~~(Math.random() * 5);
    for (m = 0; m < markings; m ++) {
        $('button#add_marking').trigger('click');
    }
    tail_markings = ~~(Math.random() * 5);
    for (t = 0; t < tail_markings; t ++) {
        $('button#add_tail_marking').trigger('click');
    }
    $('select.options').each(function(){
        var $options = $(this).find('option:enabled');
        random = ~~(Math.random() * $options.length);
        $options.eq(random).prop('selected', true).trigger('change');
    });
    $('input.options').each(function(){
        random = ~~(Math.random() * 100) / 100;
        $(this).val(random).trigger('change');
    });
    processDemo();
});

$('button#reset').click(function(){
    $('form#demo').trigger('reset');
    processDemo();
});

$('button#create').on('click', function(){
    $('button#create').data('clicked', true);
    $('button#create').prop('disabled', true);
    processDemo();
});

    function processDemo() {
        if (!page.check) {
            page.check = true;
        setTimeout(function(){
            page.check = false;
        }, 500);
        $('img#fox').prop('src', 'images/assets/foxes/misc/loading.gif');
        var foxData = {
            background_id: $('select#background_id').val(),
            species_id: $('select#species_id').val(),
            gender: $('select#gender').val(),
            fur_color_id: $('select#fur_color_id').val(),
            skin_color_id: $('select#skin_color_id').val(),
            claws_color_id: $('select#claws_color_id').val(),
            eyes_left_color_id: $('select#eyes_left_color_id').val(),
            eyes_right_color_id: $('select#eyes_left_color_id').val(),
            markings: $('select.marking').serializeArray(),
            markings_color: $('select.marking_color').serializeArray(),
            markings_opacity: $('input.marking_opacity').serializeArray(),
            tail_markings: $('select.tail_marking').serializeArray(),
            tail_markings_color: $('select.tail_marking_color').serializeArray(),
            tail_markings_opacity: $('input.tail_marking_opacity').serializeArray(),
            create: 'no'
        };
        if ($('button#create').data('clicked')) {
            foxData.create = 'yes';
            $('button#create').data('clicked', false);
        }
        JSON.stringify(foxData);
$.ajax({
    type: "get",
    url: "{{ route('demo.process') }}",
    dataType: "json",
        data: foxData,
    success: function(data){
        if (foxData.create == 'no') {
            $('img#fox').prop('src', 'data:image/png;base64,'+data.image);
        }
        else {
            window.location.href = data.url;
        }
}
});
}
}

// Replace _ in the given string.
function str_replace(str) {
    return str.replace(/\_/g, ' ');
}

function ucwords (str) {
    return (str + '').replace(/^([a-z])|\s+([a-z])/g, function ($1) {
        return $1.toUpperCase();
    });
}

    });
</script>
@endsection

Так что да, в основном нужна помощь выясняя, почему это не работает, мы спросили нескольких людей и растерялись. Кто-то предложил использовать триггеры событий, но ничего не объяснил. Любая помощь приветствуется!

...