Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 09.12.2017, 10:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

arooly,
не могу помочь, нужен код, смотрите пост №9, или ждите для того, кому достаточно ваших данных.
Ответить с цитированием
  #12 (permalink)  
Старый 09.12.2017, 12:26
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

Рони, я вас понял. Извиняюсь, что запутал. Сейчас попробуй объяснить так, как вы просите.
вот есть JS:
var loadALL = document.createElement('div'),
    sortElUp = document.createElement('div'),
    sortElDown = document.createElement('div'),
    DelUnTop = document.createElement('div'),
    y = document.createTextNode('Подгрузить');
	
sortElDown.innerHTML = 'Сортировать на ввод'
sortElUp.innerHTML = 'Сортировать на вывод'
DelUnTop.innerHTML = 'Убрать непопулярное'
sortElUp.setAttribute('class','AllBtnSU')
DelUnTop.setAttribute('class','UnTop')
sortElDown.setAttribute('class','AllBtnSD')
loadALL.setAttribute('class','AllBtn')
loadALL.appendChild(y)
$('div.block__header__wrap').after(loadALL)
$('div.AllBtn').wrap('<div class="Button">')
$('div.Button').append(sortElUp)
$('div.Button').append(sortElDown)
$('div.Button').append(DelUnTop)


Этот JS будут через расширение внедрён на сайт и создаст там два нужных div'a:
1 - sortElUp
2 - sortElDown
Далее им присваивается class

sortElUp.setAttribute('class','AllBtnSU')
sortElDown.setAttribute('class','AllBtnSD')


Ниже будет вырезанная часть страницы с материалом, что нужно отсортировать. Отменяю,
что отсортировать нужно .item по критерию .parseDataPRGREEN и .parseDataPRRED.



<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="items" id="inventory_bot">
		<div class="item" id="12938478918">
			<div class="c">
				<span class="p5"></span>
			</div>
			<div class="im problem_images" style="background-image: url('https://pic.money/kbn_s.jpg?v=16')"></div>
			<div class="r">
				&nbsp; <span class="float_item"></span>
			</div>
			<div class="f2">
				<span>x</span>1<svg class="f_s">
				<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
			</div>
			<div class="p">
				<span>$</span> 2.77
			</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=eSports%20Key&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-42.49
				</div>
				<div class="parseDataPRRED">
					51.8
				</div>
				<div class="parse-data-price">
					1.77$
				</div>
			</div>
		</div>
		<div class="item" id="12936889139">
			<div class="c">
				<span class="p5"></span>
			</div>
			<div class="im problem_images" style="background-image: url('https://pic.money/j9z_s.jpg?v=16')"></div>
			<div class="r">
				&nbsp; <span class="float_item"></span>
			</div>
			<div class="f2">
				<span>x</span>1<svg class="f_s">
				<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
			</div>
			<div class="p">
				<span>$</span> 2.76
			</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=Chroma%20Case%20Key&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-41.96
				</div>
				<div class="parseDataPRRED">
					50.4
				</div>
				<div class="parse-data-price">
					1.78$
				</div>
			</div>
		</div>
		<div class="item" id="12939336365">
			<div class="im" style="background-image: url('https://pic.money/jgq_s.jpg?v=16')"></div>
			<div class="r">
				FN <span class="float_item"></span>
			</div>
			<div class="f">
				<span>x</span>1<svg class="f_s">
				<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
			</div>
			<div class="p">
				<span>$</span> 2.74
			</div><svg class="st">
			<use xlink:href="#stattrak-small" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=StatTrak%E2%84%A2%20CZ75-Auto%20|%20Imprint%20(Factory%20New)&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					127.96
				</div>
				<div class="parseDataPRRED">
					-61.7
				</div>
				<div class="parse-data-price">
					6.94$
				</div>
			</div>
		</div>
		<div class="item" id="12938672308|12938547743">
			<div class="c">
				<span class="a">Все</span>
			</div>
			<div class="im problem_images" style="background-image: url('https://pic.money/kvs_s.jpg?v=16')"></div>
			<div class="r">
				&nbsp; <span class="float_item"></span>
			</div>
			<div class="f1">
				<span>x</span>2<svg class="f_s">
				<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
			</div>
			<div class="p">
				<span>$</span> 2.74
			</div>
			<div class="ws">
				<span class="cr">+</span>
			</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=Chroma%202%20Case%20Key&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-41.53
				</div>
				<div class="parseDataPRRED">
					49.31
				</div>
				<div class="parse-data-price">
					1.78$
				</div>
			</div>
		</div>
		<div class="item" id="12939156444">
			<div class="im" style="background-image: url('https://pic.money/k6b_s.jpg?v=16')"></div>
			<div class="r">
				FN <span class="float_item"></span>
			</div>
			<div class="f">
				<span>x</span>1<svg class="f_s">
				<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
			</div>
			<div class="p">
				<span>$</span> 2.35
			</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&amp;app=730_2&amp;search_item=MAC-10%20|%20Fade%20(Factory%20New)&amp;sort=lh" target="_blank">OP</a>
			<div class="parse-btn parse-done">
				<div class="parseDataPRGREEN">
					-36.04
				</div>
				<div class="parseDataPRRED">
					36.5
				</div>
				<div class="parse-data-price">
					1.67$
				</div>
			</div>
		</div>
	</div>
</body>
</html>


Суть в том, чтобы при нажатии на мой динамически созданный div.AllBtnSU и div.AllBtnSD происходила сортировка.
Так же ниже прикрепляю картинки которые должны придать ясности.


Последний раз редактировалось arooly, 09.12.2017 в 12:32.
Ответить с цитированием
  #13 (permalink)  
Старый 09.12.2017, 12:33
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

https://ibb.co/fJprub
Ответить с цитированием
  #14 (permalink)  
Старый 09.12.2017, 13:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

arooly,


function compare(c, e) {
    var f = document.querySelectorAll(".items");
    [].forEach.call(f, function(d) {
        [].slice.call(d.querySelectorAll(".item"), 0).sort(function(a, b) {
            a = a.querySelector(c).textContent;
            b = b.querySelector(c).textContent;
            return e ? b - a : a - b
        }).forEach(function(a, b) {
            d.appendChild(a)
        })
    })
};
Ответить с цитированием
  #15 (permalink)  
Старый 09.12.2017, 14:12
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

вставляю вот так
sortElUp.onclick = function compare(c, e) {
    var f = document.querySelectorAll(".items");
    [].forEach.call(f, function(d) {
        [].slice.call(d.querySelectorAll(".item"), 0).sort(function(a, b) {
            a = a.querySelector(c).textContent;
            b = b.querySelector(c).textContent;
            return e ? b - a : a - b
        }).forEach(function(a, b) {
            d.appendChild(a)
        })
    })
};

При нажатии выдает ошибку следующего толка:
Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[object MouseEvent]' is not a valid selector.
https://ibb.co/fiVEVG
Ответить с цитированием
  #16 (permalink)  
Старый 09.12.2017, 14:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

arooly,
....!!!
sortElUp.onclick = function {
compare(".parseDataPRGREEN")

}
Ответить с цитированием
  #17 (permalink)  
Старый 09.12.2017, 14:56
Интересующийся
Отправить личное сообщение для arooly Посмотреть профиль Найти все сообщения от arooly
 
Регистрация: 10.10.2017
Сообщений: 13

Извините за столь грубую ошибку! Большое спасибо, что помогли! Очень благодарен!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS / jQuery — почему не получается выполнить программный клик по кнопке? antonium Events/DOM/Window 1 17.07.2018 00:28
Помогите выбрать: JQuery, JSON или AJAX? Apollo9 Библиотеки/Тулкиты/Фреймворки 4 14.04.2017 02:44
Как переопределить js к определенному jquery файлу из двух? OLGANJA Events/DOM/Window 1 05.03.2017 20:00
Вакансия: Front-end разработчик (HTML, CSS, JS, Ajax, jQuery) ivankov Работа 0 05.10.2010 19:00
Игра орел или решка на jquery. В любом случаи выводит вы проиграли! Dimaz jQuery 4 25.12.2009 15:04