javascript - 更新：如何将默认值传递给我的模态输入元素

Question

更新：现在已经坚持了 3 天，我无法在任何地方找到答案。我有一个模型，其中包含 -input type="text" name="mycardname" id="CardName"/- 我想将卡片名称发布到输入框的值中。我可以将它放在标签或跨度中，但找不到将其添加到输入框的方法或示例。我的代码如下。

    var ATTRIBUTES = ['cardname', 'metric', 'month'];

    $('.CardModal').on('click', function (e) {

        var $target = $(e.target);
        var modalSelector = $target.data('target');
        ATTRIBUTES.forEach(function (attributeName) {
            var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);

            var dataValue = $target.data(attributeName);
            $modalAttribute.text(dataValue || '');

            $target('#CardName')('value try This');
        });
    });

    $('#settingsModal,#monthModal').on('show.bs.modal', function (event) {
        alert("this alert");
        var $card = $(event.relatedTarget).closest('.card');
        var $modal = $(this);

        var data = $card.data();
        Document.getElementById('#CardName').val("try This");




        for (var item in data) {
            $modal.find('[name="' + item + '"]').val(data[item]);
        }
    });

    $('#monthModal .btn-primary').click(function () {
        var $modal = $(this).closest('.modal');

        var searchType = $modal.find('input[name="SearchTypeRadio"]:checked').val();


        var metric = $modal.find('[name="metric"]').val();
        var month = $modal.find('[name="month"]').val();
        var cdName = $modal.find('[name="mycardname"]').val();

        alert("SearchType: " + searchType + " Metric: " + metric + " Month: " + month + " Card Name: " + cdName);



    });

    $('.btnApplyColors').on('click', function () {


        var $modal = $(this).closest('.modal');
        var cardName = $modal.find('[name="name"]').val();
        var grMin = $modal.find('[name="greenmin"]').val();
        var grMax = $modal.find('[name="greenmax"]').val();
        var yMin = $modal.find('[name="yellowmin"]').val();
        var yMax = $modal.find('[name="yellowmax"]').val();
        var rMin = $modal.find('[name="redmin"]').val();
        var rMax = $modal.find('[name="redmax"]').val();

        var cardTR = cardName + 'TR';


        var elements = document.getElementsByClassName(cardTR); // get all elements
        for (var i = 0; i < elements.length; i++) {
            var tsd1 = cardName + i + 'TD1';
            var tsd2 = cardName + i + 'TD2';

            var td1 = document.getElementById(tsd1).innerHTML;
            var td2 = parseInt(document.getElementById(tsd2).innerHTML);


            alert(td1 + " - " + td2);

            switch (true) {

                case (td2 >= yMin && td2 <= yMax):
                    alert(td1 + " - " + td2 + " YMin " + yMin + " yMax " + yMax);
                    elements[i].style.backgroundColor = "lightyellow";
                    elements[i].style.color = 'brown';

                    break;

                case (td2 >= grMin && td2 <= grMax):
                    alert(td1 + " - " + td2 + " grMin " + grMin + " grMax " + grMax);
                    elements[i].style.backgroundColor = "#E7FCE3";
                    elements[i].style.color = 'darkgreen';

                    break;

                case (td2 >= rMin && td2 <= rMax):
                    alert(td1 + " - " + td2 + " rMin " + rMin + " rMax " + rMax);
                    elements[i].style.backgroundColor = "mistyrose";
                    elements[i].style.color = 'red';

                    break;
                default:
                    alert("Hit the Default because " + td2 + " not found");
                    break;
            }
        }

        $('#ScoreCardDefaults').modal('hide');



    });

    $(document).ready(function () {
        $('input[type="radio"]').click(function () {
            var inputValue = $(this).attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
        });
    });

    //  clean this up //

    let startYear = 2000;
    let endYear = new Date().getFullYear();
    for (i = endYear; i > startYear; i--) {
        $('#yearpicker').append($('<option />').val(i).html(i));
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">


        <div class="col mb-4" data-mincoolscale="71">
            <div class="card text-center" data-metric="14" data-month="2020-10" data-mincoolscale="71" data-maxcoolscale="100" data-minwarmscale="51" data-maxwarmscale="70" data-minhotscale="0" data-maxhotscale="50">
                <div class="card-img-top d-flex align-items-center justify-content-center bg-primary text-light metric-header">
                    <span class="h5 my-1">my card</span>
                </div>

                <div class="card-body pt-3">
                    <h6 class="card-title">
                        my card title
                    </h6>

                    <p>
                        <span class="metric-date">@DateTime.Now.ToString("MMMM yyyy")</span>
                        <button type="button" class="btn btn-sm btn-link CardModal" data-cardname="The Card Name" data-toggle="modal" data-target="#monthModal" title="Edit" aria-title="Edit">
                            Ccc
                        </button>
                    </p>

                </div>
            </div>
        </div>



    </div>
</div>
<div class="modal fade" id="monthModal" tabindex="-1" aria-labelledby="monthModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="monthModalTitle">Display Statistics For</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <span id="modal-cardname"></span>
                <input type="text" name="mycardname" id="CardName" />


                <div class="myRadios">
                    <label><input type="radio" name="SearchTypeRadio" value="Monthly"> Monthly</label>
                    <label><input type="radio" name="SearchTypeRadio" value="Quarterly"> Quarterly</label>

                </div>
                <div style="display:none" class="Monthly box">You have selected Monthly</div>
                <div style="display:none" class="Quarterly box">You have selected quarterly</div>



                <div style="display:none" class="Monthly box form-group">
                    <input type="month" id="month" name="month" class="form-control w-auto" placeholder="mm/yyyy" max="@DateTime.Now.ToString("yyyy-MM")" min="2010-01" />
                </div>

                <div style="display:none" class="Quarterly box form-group">
                    @*<label for="month">Yearly Quarter of</label>*@
                    <select id="QTRS">
                        <option value="1" selected>1st Quarter</option>
                        <option value="2">2nd Quarter</option>
                        <option value="3">3rd Quarter</option>
                        <option value="4">4th Quarter</option>
                    </select>

                    <select name="yearpicker" id="yearpicker"></select>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

                @*<a class=" btn btn-primary" asp-controller="Home" asp-action="updateSSOA"> Apply</a>*@

                <button type="button" class="btn btn-primary" data-dismiss="modal">Apply</button>
            </div>
        </div>
    </div>
</div>

标签： javascriptasp.net-mvcasp.net-corebootstrap-4

Answer 1

我终于想通了：

更改： $target('#CardName')('value try This');

至：

var myCardName = $(this).data('cardname');

$(".modal-body #mycardname").val(myCardName);