Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 08.10.2013, 17:33
Новичок на форуме
Отправить личное сообщение для FerrisBuller Посмотреть профиль Найти все сообщения от FerrisBuller
 
Регистрация: 06.10.2013
Сообщений: 5

Сообщение от BETEPAH Посмотреть сообщение
Проще всего, имхо, назвать фотографии:
bo2.jpg, bo3.jpg, bp2.jpg, bp3.jpg, wo2.jpg, wo3.jpg, wp2.jpg, wp3.jpg
и формировать имя файла для вывода в одной функции:
b - черная, w - белая, o - обычная, p - приталенная, 2 - с двумя пуговицами, 3 - с тремя (проставить соответствующие value в селектах).
document.getElementById('List1').onchange = document.getElementById('List2').onchange = document.getElementById('List3').onchange = function () {document.getElementById('photo').src = document.getElementById('List1').value +  document.getElementById('List2').value +  document.getElementById('List3').value; }
Будьте любезны, напишите частичку кода, которую я смогу размножить, просто моих знаний не хватает, чтобы воспользоватся Вашим ценным советом, Вот, что я смог из себя выжать:

<html>
	<head>
	<title>Документ без названия</title>
	<script type="text/javascript" src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/linkedselect.js"></script>
        </head>

<body>
<script language="JavaScript"> 
<!-- 
function l_image (a) 
{ 
document.images [0] .src=a 
} 
--> 
</script>  
<table cols="2" width="90%" border="0">
<tr><td>
	<p><select id="List1" onchange="document.getElementById('List1').onchange = document.getElementById('List2').onchange = document.getElementById('List3').onchange = function () {document.getElementById('photo').src = document.getElementById('List1').value +  document.getElementById('List2').value +  document.getElementById('List3').value; }">
	<option value="white" >White</option>
	<option value="black">Black</option>
	</select></p>
	<p><select id="List2"></select></p>
	<p><select id="List3"></select></p></td>
<td align="center" valign="center"><img src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg" name="tool" ></td>
</tr>
</table>

<script type="text/javascript">
var syncList1 = new syncList
syncList1.dataList = { 

	'white':{
		'white_1':'обычная', 
		'white_2':'приталинная'
	},	
	'black':{
		'black_1':'обычная ч',
		'black_2':'приталинная ч'
	},	
	'white_1':{
		'white_1_1':'обычная с 2 пуговицами',
		'white_1_2':'обычная с 3 пуговицами'
	},
	'white_2':{
		'white_2_1':'приталинная с 2 пуговицами',
		'white_2_2':'приталинная с 3 пуговицами'
	},
	'black_1':{
		'black_1_1':'обычная ч с 2 пуговицами',
		'black_1_2':'обычная ч с 3 пуговицами'
	},
	'black_2':{
		'black_2_1':'приталинная с 2 пуговицами',
		'black_2_2':'приталинная с 3 пуговицами'
	}
};

syncList1.sync("List1","List2","List3");
</script>


</body>
</html>
Ответить с цитированием
  #12 (permalink)  
Старый 09.10.2013, 13:21
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Вы забыли запятую в одной строке поставить, и пытались брать zip из Groups в то время как сами запихали его в items.

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    
  </head>
  <body>
    <div ng-controller="Controller">                  
<h2 >Магазинчег</h2>
      

          <table cols="2" width="90%" border="0">
             <tr><td><p>
              <label>Цвет рубашки</label>
              <select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select></p>
          
              <p><label>Тип рубашки</label>
              <select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select></p>

			  <p><label>Запястье</label>
              <select data-ng-model="currentZap" data-ng-options="zap.Name for zap in currentZaps"></select></p></td>
                

    
      <td><img src="{{img}}"/></td><tr></table>
      
      <script>
        function Controller($scope) {
        
            var groups = [
                {
                	"Id": "1",
                    "Name": "Белое платье сшитое эльфами  ",
                    "Items": [
                        {
                            "Id": "1",
                            "Name": "Большое",                          
							"Zaps": [
								{
									"Id": "1",
									"Name": "2 Пуговки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
								}, {
									"Id": "2",
									"Name": "3 Пуговки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
								}
							]		
						}, {
                            "Id": "2",
                            "Name": "Маленькое",
							"Zaps": [
								{
									"Id": "1",
									"Name": "4 Пуговки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
								}, {
									"Id": "2",
									"Name": "Молния",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
								}
							]		                          
                        }, {
                            "Id": "3",
                            "Name": "Среднее",
   							"Zaps": [
								{
									"Id": "1",
									"Name": "Шнурки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
								}, {
									"Id": "2",
									"Name": "Липучки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
								}
							]		                          

                        }, {
                            "Id": "4",
                            "Name": "XXL Для жиртресток",
   							"Zaps": [
								{
									"Id": "1",
									"Name": "Магически срастается",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
								}, {
									"Id": "2",
									"Name": "снимается по заклятью",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
								}
							]		                                          
                        }
                    ]
            	}, {
                	"Id": "2",
                    "Name": "Куртка из кожи с жопы дракона",
                    "Items": [
                        {
                            "Id": "5",
                            "Name": "Для детей",
                            "img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
                    	}, {
                        	"Id": "6",
                        	"Name": "Для карликов",
                        	"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"                          
                    	}, {
                        	"Id": "7",
                        	"Name": "Для гномов",
                        	"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
                    	}
                    ]
            	}];
        	
            $scope.groups = groups;                            // Все товары
            $scope.currentGroup = groups[0];                   // Выбранные товар          	
            
            //Следим за изменением товара
            $scope.$watch('currentGroup', function () {
                $scope.currentItems = $scope.currentGroup.Items;
                $scope.currentItem = $scope.currentGroup.Items[0];
            });

            //Следим за изменением размера
            $scope.$watch('currentItem', function () {
              	$scope.img = $scope.currentItem.img;          
                $scope.currentZaps = $scope.currentItem.Zaps;
                $scope.currentZap = $scope.currentItem.Zaps[0];
            }),
             
			$scope.$watch('currentZap', function () {
				$scope.img = $scope.currentZap.img;
			})	
        }
      </script>
      
    </div>
  </body>
</html>



В примере тип запястья зависит от размера рубашки.

Если вдруг нужно чтобы запястья зависило только от группы а не от размера тогда делаем так.
1) Размещать zip надо в groups рядом с items, а не внутри items
2) Соответственно устанавливать при изменении группы а не items. Тобиш $watch('currentGroup'
3) Забирать zip из currentGroup а не currentItem. тобиш $scope.currentZaps = $scope.currentGroup.Zaps;
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 09.10.2013 в 13:38.
Ответить с цитированием
  #13 (permalink)  
Старый 09.10.2013, 15:22
Новичок на форуме
Отправить личное сообщение для FerrisBuller Посмотреть профиль Найти все сообщения от FerrisBuller
 
Регистрация: 06.10.2013
Сообщений: 5

Спасибо!!!!!!
Ответить с цитированием
  #14 (permalink)  
Старый 10.10.2013, 06:25
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от DjDiablo
Куртка из кожи с жопы дракона
Сообщение от DjDiablo
Для карликов
хорошо выглядит =)))
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #15 (permalink)  
Старый 10.10.2013, 10:22
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 05.06.2009
Сообщений: 1,703

Сообщение от DjDiablo
Куртка из кожи с жопы дракона
лёгкая как пёрышко и при пожаре ты к ней не пригоришь (с)
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
  #16 (permalink)  
Старый 08.11.2013, 20:35
Новичок на форуме
Отправить личное сообщение для FerrisBuller Посмотреть профиль Найти все сообщения от FerrisBuller
 
Регистрация: 06.10.2013
Сообщений: 5

Уважаемый djDiablo,
а как сделать так, чтобы выбранное вариант положить в корзину?
что нужно прикрутить?
Ответить с цитированием
  #17 (permalink)  
Старый 09.11.2013, 13:00
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Корзину можно реализовать как форму которую можно отправить на сервер нажатием обыкновенного submit и затем обработать на сервере при помощи обычного php.

В качестве демонстрации, вот немного грязного, не аккуратного и непродуманного кода написанного по принципу лишь бы отвязаться )))

Будет время чуть позже, нарисую чо нибудь покрасивше.
А пока вот тебе то что набросал на скорую руку

Сейчас в примере конечно просто категория отображается, но ты сам виноват ведь название товара как такового у тебя нигде не указано. Попробуй наименование товара сам добавить, и следи чтобы id у тебя были уникальные и не повторялись.

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    
  </head>
  <body>
    <div ng-controller="Controller">                  
<h2 >Магазинчег</h2>      

          <table cols="2" width="90%" border="0">
             <tr><td><p>
              <label>Цвет рубашки</label>
              <select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select></p>
          
              <p><label>Тип рубашки</label>
              <select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select></p>

			  <p><label>Запястье</label>
              <select data-ng-model="currentZap" data-ng-options="zap.Name for zap in currentZaps"></select></p></td>                
    
      <td><img src="{{img}}"/></td><tr></table>      
      
      <button ng-click="add()"> Добавить в корзинку </button>
      
      <h2> Корзинка красной шапочки. </h2>
      
      <form action="zakaz.php" method="post">
          <table>
            <tr>
                <td>  Наименование  </td>
                <td>  количество  </td>
                <td>  цена  </td>            
                <td>  операции  </td>            
            </tr>      
            
            <tr ng-repeat="item in basket">
                <td>  <input name="id[]" TYPE="hidden" value='{{item.id}}'> {{item.Name}} </td>
                <td>  <input name="count[]" ng-model='item.count'>  </td>
                <td>    </td>            
                <td> <button ng-click="remove(item.id)" >Убрать</button>   </td>                      
              
            </tr>          
            
          </table>
        
          <input type="submit" value="Оформить заказ">  </input>                
      </form>
      <script>
        
        function Controller($scope) {
          
            // надеюсь перевод это не мусорная корзина ))          
            $scope.basket = [];

            var groups = [
                {
                	"Id": "1",
                    "Name": "Белое платье сшитое эльфами  ",
                    "Items": [
                        {
                            "Id": "1",
                            "Name": "Большое",                          
							"Zaps": [
								{
									"Id": "2",
									"Name": "3 Пуговки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
								}, {
									"Id": "4",
									"Name": "4 Пуговки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
								}
							]		
						}, {
                            "Id": "6",
                            "Name": "Маленькое",
							"Zaps": [
								{
									"Id": "7",
									"Name": "4 Пуговки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
								}, {
									"Id": "8",
									"Name": "Молния",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
								}
							]		                          
                        }, {
                            "Id": "9",
                            "Name": "Среднее",
   							"Zaps": [
								{
									"Id": "10",
									"Name": "Шнурки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
								}, {
									"Id": "11",
									"Name": "Липучки",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
								}
							]		                          

                        }, {
                            "Id": "12",
                            "Name": "XXL Для жиртресток",
   							"Zaps": [
								{
									"Id": "13",
									"Name": "Магически срастается",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
								}, {
									"Id": "14",
									"Name": "снимается по заклятью",
								    "img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
								}
							]		                                          
                        }
                    ]
            	}, {
                	"Id": "2",
                    "Name": "Куртка из кожи с жопы дракона",
                    "Items": [
                        {
                            "Id": "15",
                            "Name": "Для детей",
                            "img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
                    	}, {
                        	"Id": "16",
                        	"Name": "Для карликов",
                        	"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"                          
                    	}, {
                        	"Id": "17",
                        	"Name": "Для гномов",
                        	"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
                    	}
                    ]
            	}];
        	
            $scope.groups = groups;            // Все товары
            $scope.currentGroup = groups[0];   // Выбранные товар          	
            
            //Следим за изменением товара
            $scope.$watch('currentGroup', function () {
                $scope.currentItems = $scope.currentGroup.Items;
                $scope.currentItem = $scope.currentGroup.Items[0];
            });

            //Следим за изменением размера
            $scope.$watch('currentItem', function () {
              	$scope.img = $scope.currentItem.img;          
                $scope.currentZaps = $scope.currentItem.Zaps;
                $scope.currentZap = $scope.currentItem.Zaps[0];
            }),
             
			$scope.$watch('currentZap', function () {
				$scope.img = $scope.currentZap.img;
                $scope.currentZap = $scope.currentZap;
			})	


            //Добавление товара в корзину
            $scope.add=function(){
              var newItem=true;
              
              for(var i=0,l=$scope.basket.length;i<l;i++){                
                if($scope.basket[i].id==$scope.currentZap.Id) {
                  $scope.basket[i].count++;
                  newItem=false;
                  break;
                }                    
              }
              
              if( newItem ){
                $scope.basket.push( {
                    Name:$scope.currentZap.Name,
                    count:1,
                    id:$scope.currentZap.Id               
                });                          
              }                                                                 
            };                      
			//удаление товара из корзины                
			$scope.remove=function(id){                
                for(var i=0,l=$scope.basket.length;i<l;i++){                
                  if($scope.basket[i].id==id) {
                    $scope.basket.splice(i, 1);;                    
                    break;
                  }                    
              	}                              
            }                      
        }
      </script>
      
    </div>
  </body>
</html>


К слову меня очень забавляет вопрос как и где ты будешь формировать древовидную структуру данных с товарами которая предложена тобой для скрипта
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 09.11.2013 в 13:44.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ПОМОГИТЕ разобраться со скриптом (картинка праздничного дня) Zhuk13@ya.ru Общие вопросы Javascript 7 08.12.2013 19:51
МИГАЮЩАЯ КАРТИНКА johnsag Элементы интерфейса 1 30.05.2012 11:39
При наведении на ссылку меняется картинка ucoz (jquery) pelimeshki jQuery 2 13.01.2012 01:53
Смена картинок по списку. TrueOman Общие вопросы Javascript 8 28.11.2011 01:11
Opera 11.00 не подгружается картинка greatilya Opera, Safari и др. 1 27.12.2010 20:27