Alvaros জেএস বিনামূল্যে উত্তর আমার জন্য দুর্দান্ত শুরু ছিল এবং আমি সত্যিই সত্যিকার অর্থে জেএস-মুক্ত উত্তর পাওয়ার চেষ্টা করেছি যা চিত্রের সাথে একটি নির্বাচনের প্রত্যাশিত সমস্ত কার্যকারিতা সরবরাহ করে, তবে দুঃখের বিষয় হল নীচে পড়েছিল। আমি এখানে দুটি সমাধান পোস্ট করছি; আমার মূল সমাধান যা জাভাস্ক্রিপ্টের 1 লাইন ব্যবহার করে এবং একটি সম্পূর্ণ জাভাস্ক্রিপ্ট-মুক্ত সমাধান যা অন্য কোনও ফর্মের অভ্যন্তরে কাজ করবে না, তবে এনএভি মেনুগুলির জন্য কার্যকর হতে পারে।
দুর্ভাগ্যক্রমে কোডটিতে কিছুটা পুনরাবৃত্তি রয়েছে, কিন্তু যখন আপনি কোন নির্বাচন কী তা বিবেচনা করে তা বোধগম্য হয়। আপনি যখন কোনও বিকল্পে ক্লিক করেন এটি সেই পাঠ্যটি নির্বাচিত অঞ্চলে অনুলিপি করে, অর্থাত, 4 টির মধ্যে 1 টিতে ক্লিক করা 4 টি বিকল্প পরিবর্তন করবে না, তবে শীর্ষে এখন আপনি ক্লিক করেছেন তার পুনরাবৃত্তি করবে। চিত্রগুলির সাথে এটি করার জন্য জাভাস্ক্রিপ্ট, আরআরআর প্রয়োজন হবে ... আপনি এন্ট্রিগুলি নকল করুন।
আমার উদাহরণে আমাদের কাছে গেমগুলির একটি তালিকা রয়েছে (পণ্যগুলি), যার সংস্করণ রয়েছে। প্রতিটি পণ্যেরও বিস্তৃতি থাকতে পারে, যার সংস্করণও থাকতে পারে। প্রতিটি পণ্যের জন্য আমরা চিত্র এবং সংস্করণ নির্দিষ্ট পাঠ্য সহ একাধিকর বেশি থাকলে ব্যবহারকারীকে প্রতিটি সংস্করণে একটি তালিকা প্রদান করি।
<h4>@Model.Name</h4>
@if (Model.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="@Model.Versions[0].ImageUrl" alt="">@Model.Versions[0].VersionName (@Model.Versions[0].Year)
</div>
}
else
{
<h5>Select the version</h5>
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
@foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<input type="radio" name="game" id="game-@version.ProductId-@version.VersionId" @if (version == Model.Versions.First()) { @Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="@version.ImageUrl" alt="">@version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button"></label>
<div class="rich-select-options">
@foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="game-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
<img src="@version.ImageUrl" alt=""> @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
চেকবক্সের অনির্বাচনের জন্য জেএস ব্যবহার করে আমাদের একটি ফর্মের একাধিক উদাহরণ থাকতে পারে। এখানে আমি সম্প্রসারণের একটি তালিকা প্রদর্শন করতে প্রসারিত করেছি, যার সংস্করণগুলিতেও একই যুক্তি রয়েছে।
<h5 class="mt-3">Include Expansions?</h5>
@foreach (var expansion in Model.Expansions)
{
<div class="form-row">
<div class="custom-control custom-checkbox w-100">
<input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-@expansion.ProductId">
<label class="custom-control-label w-100" for="exp-@expansion.ProductId">
@if (expansion.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="@expansion.ImageUrl" />@expansion.Name: @expansion.Versions[0].VersionName (@expansion.Versions[0].Year)
</div>
}
else
{
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
@foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<input type="radio" name="exp-@version.ProductId" id="exp-@version.ProductId-@version.VersionId" @if (version == expansion.Versions.First()) { @Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button-@expansion.ProductId" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button-@expansion.ProductId"></label>
<div class="rich-select-options">
@foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="exp-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-@expansion.ProductId').click();">
<img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
</label>
</div>
</div>
অবশ্যই এটির জন্য মোটামুটি সিএসএস দরকার, যা ইতিমধ্যে এই বৃহত্তর উত্তরের আকার হ্রাস করার জন্য আমি কেবল এই জেএসফিটালটিতে অন্তর্ভুক্ত করেছি । আমি প্রয়োজনীয় পরিমাণ হ্রাস করতে বুটস্ট্র্যাপ 4 ব্যবহার করেছি এবং এটি অন্যান্য বুটস্ট্র্যাপ নিয়ন্ত্রণ এবং যে কোনও সাইট কাস্টমাইজেশন তৈরি করা হয়েছে তার সাথে মাপসই করতে দেয়।
চিত্র 75px সেট করা হয়, কিন্তু এই সহজে 5 লাইনে পরিবর্তন করা যাবে .rich-selectএবং.rich-select-option-body img
