I have a table with multiple rows, each row has:
- layout (select)
- images * 10
The amount of images depends on the layout selected. I want to write some jquery code that hides/shows the amount of images depending on the layout selected/changed.
At the moment I have this which doesn’t work correctly and only shows 1 image each time.
$('select.layouts').bind("change keyup",function(){
var val = $(this).val();
switch(val){
case 1:
showImgs = 1;
break;
case 2:
showImgs = 2;
break;
case 3:
showImgs = 3;
break;
case 4:
showImgs = 4;
break;
default:
showImgs = 1;
}
$(this).parents("tr").find(".images .image:lt("+showImgs+")").show();
})
Also would it be best practice to instead of adding how many images per layout into the JS code, I have a data attribute to the select option?
HTML Table
<table class="list" id="images">
<thead>
<tr>
<td>Layout:</td>
<td>Image:</td>
</tr>
</thead>
<tbody id="image-row0">
<tr>
<td>
<select class="layouts" name="banner_image[0][layout]">
<option value="1">Layout 1</option>
<option selected="selected" value="2">Layout 2</option>
<option value="3">Layout 3</option>
<option value="4">Layout 4</option>
<option value="5">Layout 5</option>
<option value="6">Layout 6</option>
<option value="7">Layout 7</option>
<option value="8">Layout 8</option>
<option value="9">Layout 9</option>
<option value="10">Layout 10</option>
</select>
</td>
<td class="left images">
<div style="display: none" class="image">
<label for="thumb0">Image 1</label><br>
<input type="hidden" id="image0" value="data/slides/dd1.png" name="banner_image[0][image]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb20">Image 2</label><br>
<input type="hidden" id="image20" value="data/slides/dd1.png" name="banner_image[0][image2]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb30">Image 3</label><br>
<input type="hidden" id="image30" value="data/slides/dd1.png" name="banner_image[0][image3]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb40">Image 4</label><br>
<input type="hidden" id="image40" value="data/slides/dd1.png" name="banner_image[0][image4]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb50">Image 5</label><br>
<input type="hidden" id="image50" value="data/slides/dd1.png" name="banner_image[0][image5]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb60">Image 5</label><br>
<input type="hidden" id="image60" value="data/slides/dd1.png" name="banner_image[0][image6]"> <br>
</div>
</td>
</tr>
</tbody>
<tbody id="image-row1">
<tr class="odd">
<td>
<select class="layouts" name="banner_image[1][layout]">
<option selected="selected" value="1">Layout 1</option>
<option value="2">Layout 2</option>
<option value="3">Layout 3</option>
<option value="4">Layout 4</option>
<option value="5">Layout 5</option>
<option value="6">Layout 6</option>
<option value="7">Layout 7</option>
<option value="8">Layout 8</option>
<option value="9">Layout 9</option>
<option value="10">Layout 10</option>
</select>
</td>
<td class="left images">
<div style="display: none" class="image">
<label for="thumb0">Image 1</label><br>
<input type="hidden" id="image0" value="data/slides/dd1.png" name="banner_image[0][image]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb20">Image 2</label><br>
<input type="hidden" id="image20" value="data/slides/dd1.png" name="banner_image[0][image2]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb30">Image 3</label><br>
<input type="hidden" id="image30" value="data/slides/dd1.png" name="banner_image[0][image3]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb40">Image 4</label><br>
<input type="hidden" id="image40" value="data/slides/dd1.png" name="banner_image[0][image4]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb50">Image 5</label><br>
<input type="hidden" id="image50" value="data/slides/dd1.png" name="banner_image[0][image5]"> <br>
</div>
<div style="display: none" class="image">
<label for="thumb60">Image 5</label><br>
<input type="hidden" id="image60" value="data/slides/dd1.png" name="banner_image[0][image6]"> <br>
</div>
</td>
</tr>
</tbody>
</table>
EDIT: @Kalle H. Väravas code
var layouts_data = {
0: {
name: 'None',
images: 0
},
1: {
name: 'Layout 1',
images: 1
},
2: {
name: 'Layout 2',
images: 4
},
3: {
name: 'Layout 3',
images : 6
},
4: {
name: 'Layout 4',
images: 4
},
5: {
name: 'Layout 5',
images: 5
}
};
SetLayout = function (row, layoutid) {
var current_layout = layouts_data[layoutid];
$(row).find('.image').hide().each(function (i, elm) {
if ((i + 1) <= current_layout['images']) {
$(elm).show();
}
});
};
$(document).ready(function () {
$('#images tbody tr').each(function(i, elm) {
SetLayout($(this), $(this).find('select.layouts option:selected').val());
});
});
// Lets catch the event
$('select.layouts').bind("change keyup", function () {
SetLayout($(this).parents("tr"), $(this).val());
});
Revision 1
As reading your comments and understand the issue better. I have composed a nice little layout-array. This way you can store more data and basically just pick the layout with the select.
http://jsfiddle.net/hobobne/FxU6V/1/
General idea stays the same, but little bit more complex.
Original
I might have understood you wrong, but this is what I got to offer:
[ View output ]
For this example, I used colorful containers instead of the images, but technically it doesn’t matter. And as you can see, the fiddle contains comments, so you can understand each step 🙂