ฉันมีคำศัพท์อนุกรมวิธาน 3 คำที่ฉันต้องการใช้เป็นตัวกรอง แต่ฉันต้องการใช้ JavaScript เพื่อปิดใช้งานตัวกรองในขณะที่คุณทำการเลือกในตัวกรองที่เกี่ยวข้องอื่นๆ ตัวอย่างเช่น:
| สไตล์ | ทำให้ | โมเดล |
|---|---|---|
| รถยนต์ | บีเอ็มดับเบิลยู | 750i |
| รถบรรทุก | ฟอร์ด | เอฟ-150 |
หากคุณเลือก "รถยนต์" "ยี่ห้อ - Ford" และ "รุ่น - F-150" จะถูกปิดใช้งาน ขณะนี้ฉันมีแต่ละรายการที่กำหนดคลาส CSS ที่เหมาะสมสำหรับ hooks แต่ฉันต้องการหาวิธีเพิ่มคลาส CSS ให้กับแต่ละรายการ "Makes" และ "Models" ซึ่งจะใช้ได้หากผู้ใช้เลือก "Styles - Cars"
ฉันต้องทำสิ่งนี้เมื่อเปลี่ยนฟิลด์แบบฟอร์มและไม่ต้องรีเฟรชหน้า เป็นไปได้ไหม
ขอบคุณมากในขั้นสูง
@beltouche ขอบคุณสำหรับแนวคิดโมดูล ฉันลงเอยด้วยเส้นทางอื่นเพราะฉันต้องการตัวกรองเพื่ออัปเดตเมื่อแต่ละตัวกรองเปลี่ยนไป โดยทั่วไปเหมือนกับ facet แต่ไม่ต้องโหลดหน้าซ้ำ ฉันแน่ใจว่ามีวิธีดำเนินการสองสามวิธีและอาจเป็นวิธีที่มีประสิทธิภาพมากกว่า แต่สำหรับจำนวนสิ่งของและฟังก์ชันการทำงานที่ฉันต้องการ ดูเหมือนว่าจะใช้งานได้ค่อนข้างดี
สำหรับคนอื่นๆ ที่ต้องการพยายามและทำสิ่งเดียวกันให้สำเร็จ นี่คือขั้นตอนที่ฉันทำเพื่อให้บรรลุสิ่งที่ต้องการ
รหัสสำหรับแต่ละรายการมีดังนี้: view-view-unformated--custom-quick-search
{% สำหรับแถวต่อแถว %}
{% ถ้าแถว|เรนเดอร์|การตัดแต่งไม่ว่างเปล่า %}
{{ แถว.เนื้อหา }}
{% เอนดิฟ %}
{% สิ้นสุดสำหรับ %}
view-view-fields--custom-quick-search
{% ตั้ง category_name = field.field_category.content|striptags %}
{% set category_id = field.field_category.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set category_id = category_id|preg_replace('(" hreflang="en">.*)','$1') %}
{% set make_name = field.field_make.content|striptags %}
{% set make_id = field.field_make.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set make_id = make_id|preg_replace('(" hreflang="en">.*)','$1') %}
{% ตั้ง model_name = field.field_model.content|striptags %}
{% set model_id = field.field_model.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set model_id = model_id|preg_replace('(" hreflang="en">.*)','$1') %}
<div class="item" style="display: ไม่มี;" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class }}">
<div class="-styles" data-category="{{ category_name|clean_class }}">
<label for="{{category_name|clean_class }}" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class } }">
<input type="checkbox" name="{{ Category_name|trim }}" value="{{ category_id|trim }}" class="{{ category_name|trim|clean_class }}" id="{{ category_name|trim |คลีน_คลาส }}" />
{{ category_name|trim }}</label>
</div>
<div class="-makes" data-category="{{ Category_name|clean_class }}" data-make="{{ make_name|clean_class }}">
<label for="{{ make_name|clean_class }}" data-category="{{ Category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class } }">
<ประเภทอินพุต="ช่องทำเครื่องหมาย" name="{{ make_name|trim }}" value="{{ make_id|trim }}" class="{{ make_name|trim|clean_class }}" id="{{ make_name|trim |คลีน_คลาส }}" />
{{ make_name|trim }}</label>
</div>
<div class="-models" data-category="{{ Category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class }}">
<label for="{{ model_name|clean_class }}" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class } }">
<ประเภทอินพุต="ช่องทำเครื่องหมาย" name="{{ model_name|trim }}" value="{{ model_id|trim }}" class="{{ model_name|trim|clean_class }}" id="{{ model_name|trim |คลีน_คลาส }}" />
{{ model_name|trim }}</label>
</div>
</div>
มุมมองมุมมองฟิลด์สไตล์ฟิลด์ มุมมอง-มุมมอง-ฟิลด์-ฟิลด์-ทำ view-view-field-field-model
{{ เอาต์พุต }}
วางบล็อกบนหน้าที่ห่อด้วยสิ่งต่อไปนี้:
<div class="quickSearch hidden">
<div class="quickSearch__content">
<div class="quickSearch__filters">
<div class="filters-widget -styles">
<div class="filters-widget__items">
<div class="filters-widget__item">
<div class="filters-widget__header">
<h4>Styles</h4>
<i class="fas fa-expand-alt"></i>
<i class="far fa-compress-alt"></i>
</div>
<div class="filters-widget__copy">
</div>
</div>
</div>
</div>
<div class="filters-widget -makes">
<div class="filters-widget__items">
<div class="filters-widget__item">
<div class="filters-widget__header">
<h4>Makes</h4>
<i class="fas fa-expand-alt"></i>
<i class="far fa-compress-alt"></i>
</div>
<div class="filters-widget__copy">
</div>
</div>
</div>
</div>
<div class="filters-widget -models">
<div class="filters-widget__items">
<div class="filters-widget__item">
<div class="filters-widget__header">
<h4>Models</h4>
<i class="fas fa-expand-alt"></i>
<i class="far fa-compress-alt"></i>
</div>
<div class="filters-widget__copy">
</div>
</div>
</div>
</div>
<div class="unsorted__styles" style="display: none;"></div>
<div class="unsorted__makes" style="display: none;"></div>
<div class="unsorted__models" style="display: none;"></div>
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
<input data-drupal-selector="edit-submit-custom-search-inventory" type="submit" id="edit-submit-custom-search-inventory" value="Search" class="button js-form-submit form-submit -brand-01">
</div>
{{ drupal_entity('block', 'views_block__custom_quick_search_block_quick_search', check_access=false) }}
</div>
<div class="quickSearch__links">
{{ drupal_entity('block_content', '8') }}
</div>
</div>
</div>
โค้ดที่เหลือคือ JavaScript ที่สลับฟิลด์
/**
* ยกเลิกการล้างจากยี่ห้อและรุ่นในหน้าแรก
* โคลนทำให้ไม่เรียงลำดับ
* ลบรายการที่ซ้ำกัน
* เรียงลำดับใหม่เป็น alpha desc และย้ายไปที่เมนูแบบเลื่อนลง
*/
ฟังก์ชัน loadMakes (show_styles){
console.log(show_styles);
ถ้า ( show_styles == 'ทั้งหมด' ){
jQuery('.quickSearch .item .-makes').clone().prependTo('.quickSearch .unsorted__makes');
}
อื่น{
jQuery('.quickSearch .item .-makes[data-category="'+show_styles+'"]').clone().prependTo('.quickSearch .unsorted__makes');
}
//
// ลบรายการที่ซ้ำกันออกจากรายการดรอปดาวน์
var ทำให้ = {};
jQuery('.unsorted__makes .-makes').each(ฟังก์ชัน() {
var make = jQuery(นี้).attr('data-make');
ถ้า (ทำให้ [ทำให้])
jQuery(นี้).remove();
อื่น
ทำให้[ทำให้] = จริง;
});
// จัดลำดับอัลฟ่าใหม่และเลื่อนไปที่เมนูแบบเลื่อนลง
jQuery(ฟังก์ชัน(){
jQuery('.unsorted__makes .-makes').sort(sort_makes).clone().prependTo('.filters-widget.-makes .filters-widget__copy');
ฟังก์ชัน sort_makes(a, b){
return(jQuery(b).data('make')) < (jQuery(a).data('make')) ? 1 : -1;
}
});
}
/**
*
* โคลนโมเดลเป็นแบบไม่เรียงลำดับ
* ลบรายการที่ซ้ำกัน
* เรียงลำดับใหม่เป็น alpha desc และย้ายไปที่เมนูแบบเลื่อนลง
*/
ฟังก์ชัน loadModels(show_styles,show_makes){
ถ้า ( show_makes == 'ทั้งหมด' ){
jQuery('.quickSearch .item .-models').clone().prependTo('.quickSearch .unsorted__models');
}
อื่น{
jQuery('.quickSearch .item .-models[data-category="'+show_styles+'"][data-make="'+show_makes+'"]').clone().prependTo('.quickSearch .unsorted__models') ;
}
//
// ลบรายการที่ซ้ำกันออกจากโมเดลแบบเลื่อนลง
โมเดล var = {};
jQuery('.unsorted__models .-models').each(ฟังก์ชัน() {
var model = jQuery(นี้).attr('data-model');
ถ้า (รุ่น [รุ่น])
jQuery(นี้).remove();
อื่น
โมเดล[โมเดล] = จริง;
});
// จัดลำดับอัลฟ่าใหม่และเลื่อนไปที่เมนูแบบเลื่อนลง
jQuery(ฟังก์ชัน(){
jQuery('.unsorted__models .-models').sort(sort_models).clone().prependTo('.filters-widget.-models .filters-widget__copy');
ฟังก์ชัน sort_models(a, b){
return(jQuery(b).data('model')) < (jQuery(a).data('model')) ? 1 : -1;
}
});
}
/**
* ย้ายสไตล์เป็นแบบไม่เรียงลำดับ
* ลบรายการที่ว่างเปล่า
* ลบรายการที่ซ้ำกัน
* เรียงลำดับใหม่เป็น alpha desc และย้ายไปที่เมนูแบบเลื่อนลง
*/
// ลบรายการว่าง
jQuery('.quickSearch .item').each(ฟังก์ชัน(){
if( jQuery(นี้).data('make') == undefined || jQuery(this).data('make') == null || jQuery(this.data('make') == '') {
jQuery(นี้).remove();
}
});
jQuery('.quickSearch .item .-styles').prependTo('.quickSearch .unsorted__styles');
// ลบรายการที่ซ้ำกันออกจากรายการแบบเลื่อนลงของสไตล์
สไตล์ var = {};
jQuery('.unsorted__styles .-styles').each(ฟังก์ชัน() {
var style = jQuery(นี้).attr('data-category');
ถ้า (สไตล์[สไตล์])
jQuery(นี้).remove();
อื่น
สไตล์[สไตล์] = จริง;
});
// จัดลำดับอัลฟ่าใหม่และเลื่อนไปที่เมนูแบบเลื่อนลง
jQuery(ฟังก์ชัน(){
jQuery('.unsorted__styles .-styles').sort(sort_styles).prependTo('.filters-widget.-styles .filters-widget__copy');
ฟังก์ชัน sort_styles(a, b){
return(jQuery(b).data('category')) < (jQuery(a).data('category')) ? 1 : -1;
}
});
// แสดงและซ่อนยี่ห้อและรุ่นตามสไตล์ที่เลือก
var show_styles = '';
jQuery('.-styles input[type=checkbox]').change(function(){
jQuery('.-styles input[type=checkbox]').not(this).prop('checked', false);
jQuery('.-makes .filters-widget__copy, .-models .filters-widget__copy').html('');
jQuery('.unsorted__makes, .unsorted__models').html('');
show_styles = jQuery(นี้).parent().data('หมวดหมู่');
loadMakes(show_styles);
loadModels(show_styles,show_styles);
});
// แสดงและซ่อนยี่ห้อและรุ่นตามสไตล์ที่เลือก
var show_makes = '';
jQuery('.-makes').on('change', 'input[type=checkbox]', function(){
jQuery('.-makes input[type=checkbox]').not(this).prop('checked', false);
jQuery('.-models .filters-widget__copy').html('');
jQuery('.unsorted__models').html('');
show_styles = jQuery(นี้).parent().data('หมวดหมู่');
show_makes = jQuery(นี้).parent().data('make');
loadModels(show_styles,show_makes);
});
// ปุ่มส่งการค้นหาด่วน
jQuery('.quickSearch .form-submit').on('คลิก', function(){
style = jQuery('.-styles input:checked').val();
ทำให้ = jQuery('.-ทำให้อินพุต:ตรวจสอบ').val();
model = jQuery('.-models input:checked').val();
var quick_search_url = '';
ถ้า( สไตล์ && !makes && !models ){
quick_search_url = 'หมวดหมู่/'+สไตล์;
}
อื่นถ้า ( สไตล์ && ทำให้ && !models ){
quick_search_url = 'หมวดหมู่/'+สไตล์;
quick_search_url += '/make/'+ทำให้;
}
อื่นถ้า ( สไตล์ && !makes && รุ่น ){
quick_search_url = 'หมวดหมู่/'+สไตล์;
quick_search_url += '/model/'+models;
}
อื่นถ้า ( สไตล์ && ยี่ห้อ && รุ่น ){
quick_search_url = 'หมวดหมู่/'+สไตล์;
quick_search_url += '/make/'+ทำให้;
quick_search_url += '/model/'+models;
}
อื่นถ้า ( !styles && ทำให้ && !models ){
quick_search_url += '/make/'+ทำให้;
}
อื่นถ้า ( !styles && ทำให้ && รุ่น ){
quick_search_url += '/make/'+ทำให้;
quick_search_url += '/model/'+models;
}
อื่นถ้า ( !styles && !makes && รุ่น ){
quick_search_url += '/model/'+models;
}
window.location.href = '/inventory-search/'+quick_search_url;
});
loadMakes('ทั้งหมด');
loadModels('ทั้งหมด','ทั้งหมด');
}
คนส่วนใหญ่ไม่เข้าใจว่าการถามคำถามมากมายจะปลดล็อกการเรียนรู้และปรับปรุงความสัมพันธ์ระหว่างบุคคล ตัวอย่างเช่น ในการศึกษาของ Alison แม้ว่าผู้คนจะจำได้อย่างแม่นยำว่ามีคำถามกี่ข้อที่ถูกถามในการสนทนา แต่พวกเขาไม่เข้าใจความเชื่อมโยงระหว่างคำถามและความชอบ จากการศึกษาทั้ง 4 เรื่องที่ผู้เข้าร่วมมีส่วนร่วมในการสนทนาด้วยตนเองหรืออ่านบันทึกการสนทนาของผู้อื่น ผู้คนมักไม่ตระหนักว่าการถามคำถามจะมีอิทธิพลหรือมีอิทธิพลต่อระดับมิตรภาพระหว่างผู้สนทนา
