نمایش مطلب بعد از انتخاب radio button در php

[Mahboubeh.M]

سلام دوستان


من می خوام در قسمت مدیریت اخبار، در ابتدا چند تا radio button تعریف کنم تا مشخص بشه چه اخباری از دیتابیس نمایش داده بشه مثلا سه تا radio button با عنوان های زیر داشته باشم
1- نمایش تمامی اخبار
2- نمایش اخبار از تاریخ ..... تا تاریخ .....
3- نمایش ده خبر اخیر

حالا می خوام کاربر هر کدومو که انتخاب کرد بدون فرستادن به سمت سرور اطلاعات اون نمایش داده بشه (یعنی از قبل کل اخبار از دیتابیس خونده بشه ولی نحوه نمایش بستگی به انتخاب کاربر داشته باشه) و نیازی نباشه تا من دکمه سابمیت تعریف کنم، تقریبا مثل حالتی که در بعضی صفحات اجازه میدن مشخص کنیم چند تا خبر در صفحه نمایش داده بشه. گفتن با جاوا اسکرییپت میشه ولی من اصلا جاوا اسکریپت بلد نیستم.

میشه لطف کنین بگید کد این قسمت چطوریه؟

خیلی خیلی ممنون

[arenaw]

شما همه اخبار رو لود کنید، به این صورت:


<div class="news" data-category="c1"> asdasdasdad </div>

<div class="news" data-category="c2"> sdfsfdsdfsdfsf </div>

<div class="news" data-category="c1"> xxxcxvvfdfdggf </div>

<div class="news" data-category="c3"> zzzzzzzzzzfdfdf </div>

<div class="news" data-category="c2"> uuuuuuttttttyutyu </div>

<label> <input type="radio" value="c1" checked> C1 </label>
<label> <input type="radio" value="c2"> C2 </label>
<label> <input type="radio" value="c3"> C3 </label>

همونطور که میبینید، هر خبری که لود کردید، یه ‌attribute داره به اسم data-category که بخش خبر توش مشخص شده. ما اینجا سه نوع خبر c1 و c2 و c3 داریم. در آخر هم ۳ تا radio به ازای این ۳ تا موضوع ایجاد کردیم. از اینجا به بعد به عهده جاوااسکریپته. ما به ازای عوض شدن گزینه انتخاب شده رادیوها، اخبار مربوط به دسته‌بندی گزینه انتخاب شده رو نمایش میدیم و بقیه رو مخفی میکنیم. این کد رو داخل تگ <script> و پایین اون اخبار قرار بدید:

$('input[type=radio][data-category]').change( function(){
var cat = this.value;
$('div.news').not('[data-category='+cat+']').hide();
$('div.news[data-category='+cat+']').show();
}).change();

[Mahboubeh.M]

شما همه اخبار رو لود کنید، به این صورت:


<div class="news" data-category="c1"> asdasdasdad </div>

<div class="news" data-category="c2"> sdfsfdsdfsdfsf </div>

<div class="news" data-category="c1"> xxxcxvvfdfdggf </div>

<div class="news" data-category="c3"> zzzzzzzzzzfdfdf </div>

<div class="news" data-category="c2"> uuuuuuttttttyutyu </div>

<label> <input type="radio" value="c1" checked> C1 </label>
<label> <input type="radio" value="c2"> C2 </label>
<label> <input type="radio" value="c3"> C3 </label>

همونطور که میبینید، هر خبری که لود کردید، یه ‌attribute داره به اسم data-category که بخش خبر توش مشخص شده. ما اینجا سه نوع خبر c1 و c2 و c3 داریم. در آخر هم ۳ تا radio به ازای این ۳ تا موضوع ایجاد کردیم. از اینجا به بعد به عهده جاوااسکریپته. ما به ازای عوض شدن گزینه انتخاب شده رادیوها، اخبار مربوط به دسته‌بندی گزینه انتخاب شده رو نمایش میدیم و بقیه رو مخفی میکنیم. این کد رو داخل تگ <script> و پایین اون اخبار قرار بدید:

$('input[type=radio][data-category]').change( function(){
var cat = this.value;
$('div.news').not('[data-category='+cat+']').hide();
$('div.news[data-category='+cat+']').show();
}).change();



ممنون دوست عزیز، مشکلم حل شد

یک سوال دیگه هم داشتم. اگر خواسته باشم از تگ select استفاده کنم و در این لیست منو اعداد 5 تا 15 باشه و براساس انتخاب کاربر همان تعداد خبر نمایش داده شود باز هم باید از روش بالا استفاده کنم. در این صورت باید 16 تا تگ div تعریف کنم یا روش دیگه ای داره؟ ممنون میشم راهنماییم کنین