Обновлен код. Имейте в виду, что класс active добавляется один раз и будет в DOM, если вы не удалите его. поскольку вы используете onclick и передаете его внутрь, обработчик должен использовать переданный объект, подобный этому $(obj).addClass('active');
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.active{
opacity: 0.7;
}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<script type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main_img">
<img onclick='changeImage(this)' id="img" src="https://via.placeholder.com/150" style="width: 10%; height: 10%;" onchange="q()">
</div>
<div id="thumb_img">
<img src="https://via.placeholder.com/150" onclick='changeImage(this)' style="width: 10%; height: 10%;" id="first">
<img src="https://via.placeholder.com/150" onclick='changeImage(this)'style="width: 10%; height: 10%;" id="first">
<img src="https://via.placeholder.com/150" onclick='changeImage(this)'style="width: 10%; height: 10%;" id="first">
</div>
<script type="text/javascript">
var sr
function changeImage(obj){
sr = $(obj).attr('src');
/*alert(sr);*/
$(obj).attr('src',sr);
/*$('#img').removeClass('active');*/
$(obj).addClass('active');
$(obj).siblings().removeClass('active');
}
</script>
</body>
</html>
Только подробно остановиться на ответе casperOne.
Спецификация JSON не составляет значения Даты. MS должен был позвонить, и путь, который они выбрали, должен был использовать немного приема в представлении JavaScript строк: строковый литерал "/" совпадает с "\/", и строковый литерал никогда не будет сериализироваться к "\/" (даже "\/" должен быть отображен на "\\/").
Посмотрите http://msdn.microsoft.com/en-us/library/bb299886.aspx#intro_to_json_topic2 для лучшего объяснения (прокрутите вниз к "От Литералов JavaScript до JSON"),
Один из больных вопросов JSON является отсутствием литерала даты/времени. Многие люди удивлены и разочарованы изучить это, когда они сначала встречаются с JSON. Простое объяснение (консольное подключение или не) для отсутствия литерала даты/времени состоит в том, что JavaScript никогда не имел один также: поддержка значений даты и времени в JavaScript полностью оказывается через объект Даты. Большинство приложений с помощью JSON в качестве формата данных, поэтому, обычно имеет тенденцию использовать или строку или число для выражения значений даты и времени. Если строка будет использоваться, то можно обычно ожидать, что это будет в формате ISO 8601. Если число используется, вместо этого, то значение обычно принимается для значения количества миллисекунд в универсальное время (UTC) с эпохи, где эпоха определяется как полночь 1 января 1970 (UTC). Снова, это - простая конвенция и не часть стандарта JSON. При обмене данными с другим приложением необходимо будет проверить его документацию, чтобы видеть, как это кодирует значения даты и времени в литерале JSON. Например, Ajax ASP.NET Microsoft не использует ни одну из описанных конвенций. Скорее это кодирует.NET значения DateTime строкой JSON, где содержание строки является Датой / (галочки) / и где галочки представляют миллисекунды с эпохи (UTC). Таким образом, 29 ноября 1989, 4:55:30, в UTC кодируется как "\/Date (628318530718) \/".
Решение состояло бы в том, чтобы просто проанализировать его:
value = new Date(parseInt(value.replace("/Date(", "").replace(")/",""), 10));
Однако я услышал, что существует установка где-нибудь, чтобы заставить сериализатор производить DateTime
объекты с new Date(xxx)
синтаксис. Я попытаюсь раскопать это.
Второй параметр JSON.parse()
принимает a reviver
функция, где предписывает как значение, первоначально произведенное, прежде чем быть возвращенным.
Вот пример для даты:
var parsed = JSON.parse(data, function(key, value) {
if (typeof value === 'string') {
var d = /\/Date\((\d*)\)\//.exec(value);
return (d) ? new Date(+d[1]) : value;
}
return value;
});
См. документы JSON.parse ()
Посмотрите этот поток:
http://forums.asp.net/p/1038457/1441866.aspx#1441866
В основном, в то время как Date()
форматом является действительный JavaScript, это не допустимый JSON (существует различие). Если Вы хотите старый формат, необходимо будет, вероятно, создать фасад и преобразовать значение сами или найти способ достигнуть сериализатор для типа в JsonResult
и имейте его, используют пользовательский формат для дат.
У меня было много проблем, придумывает даты JSON и решенный, чтобы просто избавиться от проблемы путем решения проблемы даты в SQL. Измените формат даты на формат строки
select flddate from tblName
select flddate, convert(varchar(12), flddate, 113) as fldDateStr from tblName
При помощи fldDateStr, проблема исчезла, и я мог все еще использовать поле даты для сортировки или других целей.
Here's my solution in Javascript - very much like JPot's, but shorter (and possibly a tiny bit faster):
value = new Date(parseInt(value.substr(6)));
"value.substr(6)" takes out the "/Date(" part, and the parseInt function ignores the non-number characters that occur at the end.
EDIT: I have intentionally left out the radix (the 2nd argument to parseInt); see my comment below. Also, please note that ISO-8601 dates are preferred over this old format -- so this format generally shouldn't be used for new development. See the excellent Json.NET library for a great alternative that serializes dates using the ISO-8601 format.
For ISO-8601 formatted JSON dates, just pass the string into the Date constructor:
var date = new Date(jsonDate); //no ugly parsing needed; full timezone support
Не самый элегантный способ, но это сработало для меня:
var ms = date.substring(6, date.length - 2);
var newDate = formatDate(ms);
function formatDate(ms) {
var date = new Date(parseInt(ms));
var hour = date.getHours();
var mins = date.getMinutes() + '';
var time = "AM";
// find time
if (hour >= 12) {
time = "PM";
}
// fix hours format
if (hour > 12) {
hour -= 12;
}
else if (hour == 0) {
hour = 12;
}
// fix minutes format
if (mins.length == 1) {
mins = "0" + mins;
}
// return formatted date time string
return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear() + " " + hour + ":" + mins + " " + time;
}
У меня была такая же проблема, и вместо возврата фактического значения даты я просто использовал ToString("dd MMM yyyy"). Затем в своем javascript я использовал new Date(datevalue), где datevalue может быть "01 Jan 2009".
Я работаю над решением этой проблемы, так как ни один из вышеперечисленных ответов мне не помог. Я работаю с недельным календарем jquery и мне нужно, чтобы мои даты имели информацию о часовом поясе на сервере и локально на странице. После долгих поисков я нашел решение, которое может помочь другим.
Я использую asp.net 3.5, vs 2008, asp.net MVC 2 и jquery week calendar,
Во-первых, я использую библиотеку, написанную Стивеном Левитаном, которая помогает работать с датами на стороне клиента, Steven Levithan's date library. Формат isoUtcDateTime идеально подходит для того, что мне нужно. В моем вызове jquery AJAX я использую функцию format, предоставляемую библиотекой, с форматом isoUtcDateTime, и когда вызов ajax попадает в мой метод action, значение datetime Kind устанавливается на local и отражает время сервера.
Когда я отправляю даты на свою страницу через AJAX, я отправляю их в виде текстовых строк, форматируя даты с помощью "ddd, dd MMM yyyy HH':'mm':'ss 'GMT'zzzz". Этот формат легко преобразуется на стороне клиента с помощью
var myDate = new Date(myReceivedDate);
Вот мое полное решение за вычетом исходников Стива Левитхана, которые вы можете скачать:
Контроллер:
public class HomeController : Controller
{
public const string DATE_FORMAT = "ddd, dd MMM yyyy HH':'mm':'ss 'GMT'zzzz";
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
public JsonResult GetData()
{
DateTime myDate = DateTime.Now.ToLocalTime();
return new JsonResult { Data = new { myDate = myDate.ToString(DATE_FORMAT) } };
}
public JsonResult ReceiveData(DateTime myDate)
{
return new JsonResult { Data = new { myDate = myDate.ToString(DATE_FORMAT) } };
}
}
Javascript:
<script type="text/javascript">
function getData() {
$.ajax({
url: "/Home/GetData",
type: "POST",
cache: "false",
dataType: "json",
success: function(data) {
alert(data.myDate);
var newDate = cleanDate(data.myDate);
alert(newDate);
sendData(newDate);
}
});
}
function cleanDate(d) {
if (typeof d == 'string') {
return new Date(d) || Date.parse(d) || new Date(parseInt(d));
}
if (typeof d == 'number') {
return new Date(d);
}
return d;
}
function sendData(newDate) {
$.ajax({
url: "/Home/ReceiveData",
type: "POST",
cache: "false",
dataType: "json",
data:
{
myDate: newDate.format("isoUtcDateTime")
},
success: function(data) {
alert(data.myDate);
var newDate = cleanDate(data.myDate);
alert(newDate);
}
});
}
// bind myButton click event to call getData
$(document).ready(function() {
$('input#myButton').bind('click', getData);
});
</script>
Надеюсь, этот быстрый пример поможет другим в той же ситуации, в которой оказался я. На данный момент кажется, что он очень хорошо работает с Microsoft JSON Serialization и сохраняет мои даты правильными в разных часовых поясах.